• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Participant ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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.

 

 

Views

669

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 15, 2022 Apr 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 16, 2022 Apr 16, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 16, 2022 Apr 16, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 16, 2022 Apr 16, 2022

Copy link to clipboard

Copied

LATEST

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

 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines