Carousel doesn't swipe on the first image...

9 replies
1440 views
Translate

Carousel doesn't swipe on the first image... If I click the next button to the second image then the swipe works just as it should including on the first image after cycling around.

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OShea

Community Expert

I honestly don't know what you mean. Can we see your code? Or better yet, upload the page to your server and post the URL here.

A Bootstrap 4 Carousel works with directional arrows (left and right) or bottom page indicators.

https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

Translate

Nancy O'Shea— Product User & Community Expert

C

christofuttiAuthor

Inspiring

http://www.caitlanhickey.com/ssensetest.htm

it clicks through but on my phone when the page opens you can't swipe to the next image

but if you click on the button to advance to the next image you can then swipe from there

Translate

BenPleysier

Community Expert

Try

<div class="container">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">        
            <div class="carousel-item active"> <img class="d-block mx-auto img-fluid" src="http://www.caitlanhickey.com/image/ssense/1.jpg" alt="First slide">
            </div>
            <div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="http://www.caitlanhickey.com/image/ssense/2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="http://www.caitlanhickey.com/image/ssense/3.jpg" alt="Third slide">
            </div>
            <div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="http://www.caitlanhickey.com/image/ssense/4.jpg" alt="Fourth slide">
            </div>
            <div class="carousel-item"> <img class="d-block mx-auto img-fluid" src="http://www.caitlanhickey.com/image/ssense/5.jpg" alt="Fourth slide">
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
        </div>
    </div>
</div>

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

That's not how a carousel should work.

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

For more info, see:

https://getbootstrap.com/docs/5.1/components/carousel/

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

C

christofuttiAuthor

Inspiring

I don't get what you mean The link show how to disable swiping so surely it is meant to swipe through content but for some reason my first image won't swipe.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.