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

Report · Apr 15, 2022

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.

Report · Apr 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, the only real Dreamweaver alternative.

Report · Apr 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.

Report · Apr 15, 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 & Moderator

Report · Apr 15, 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

Report · Apr 15, 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, the only real Dreamweaver alternative.

Report · Apr 15, 2022

that makes it so it swipes on the phone but the buttons don't work on the computer (although the images advance automatically)...

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

i will keep trying to sort out how to make it clickable and swipable and i thank you for the help.

Report · Apr 16, 2022

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  <style>

</style>
</head>
<body>
<h1>Bootstrap 4 Carousel</h1>
<p>Adjust Data Interval in miliseconds.  A higher value = slower, a lower value = faster.</p>
<div class="col-md-6 mx-auto">
<div id="demo" class=" carousel slide" data-ride="carousel" data-interval="1500">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="https://dummyimage.com/500x750" alt="description">
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://dummyimage.com/500x750" alt="description">
</div>
<div class="carousel-item">
<img class="img-fluid" src="https://dummyimage.com/500x750" alt="description">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span></a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span></a>
</div>
</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 16, 2022

the swipe works on the phone, nothing works on my computer, for some reason

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

thanks for the help. i will either figure out how to make it all work the way i want it to or i'll use a different format.

i want it to be clickable and swipable (on a phone) and not auto-advancing

Report · Apr 16, 2022

Turn off all script blocking Add-ons in your browser.

Nancy O'Shea— Product User, Community Expert & Moderator