Skip to main content
C
christofutti
Inspiring
April 15, 2022
Question

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

  • April 15, 2022
  • 2 replies
  • 1395 views

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 has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 16, 2022

    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

     

     

     

     

    Nancy O'Shea— Product User & Community Expert
    C
    christofuttiAuthor
    Inspiring
    April 16, 2022

    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

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    April 16, 2022

    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>
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      April 15, 2022

      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/

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      C
      christofuttiAuthor
      Inspiring
      April 15, 2022

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices