Skip to main content
williamm86517933
williamm86517933
Known Participant
October 19, 2017
Answered

Button in carousel on a mobile

  • October 19, 2017
  • 1 reply
  • 4182 views

Hi All,

Scratching my head on this one, trying to make a hot button on my carousel but not working on a mobile phone but on desktop it does.

any help will be appreciated

here is an link to index please view it on mobile to see what I'm trying to explain

http://webdelvptemps.com/

Thanks All like always!

This topic has been closed for replies.
Correct answer Nancy OShea

I'm so sorry Nancy, for not explaining my self correctly what I mean the carousel works fine is the red hot button on the carousel that doesn't work on the mobile but on desktop it does. When you click on it on a desktop it goes to a page within the site but on a mobile it does nothing NO action comes out of it.

once again sorry for not explaining correctly

Thanks!

http://webdelvptemps.com/


Buttons are not working for me on desktop either. 

It's not a good idea to have links on top of carousel pagers.  It's going to be a conflict for many users. 

Instead of having image in the background, I would keep images in the foreground HTML and link the image to its target page.

An example.  Pinebrook Vacation Rentals

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 19, 2017

The Bootstrap default Carousel works fine on mobile devices.  Try replacing your CSS link with  this one and test it to see if your Carousel behaves better. 

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

PS. I'm not lovin' that fixed BACK TO THE TOP button on mobile devices.   I think it's better to ditch it -- at least on small devices where it just gets in the way.

Nancy O'Shea— Product User & Community Expert
    williamm86517933
    williamm86517933Author
    Known Participant
    October 20, 2017

    Good day Nancy, that didn't work actually when I insert the cdn it messed up my whole css so didn't do anything.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 20, 2017

    The default code works fine in mobile viewports. 

    Copy & paste this code into a new, blank document and test it.

    <!doctype html>

    <html lang="en-US">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.7 Carousel</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    .center-block {float:none}

    </style>

    </head>

    <body>

    <div class="container-fluid">

    <div class="row">

    <div class="col-md-10 center-block text-center">

    <h1>Bootstrap 3.7 Default Carousel</h1>

    </div>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Indicators -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <div class="item active">

    <img src="https://placeimg.com/1180/400/arch/4" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1180/400/arch/3" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1180/400/arch/2" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1180/400/arch/1" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <!--end active-->

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span> </a>

    <!--end carousel-->

    </div>

    </div>

    <div class="row">

    <div class="col-md-10 center-block">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quae placeat doloribus earum, aliquam, quibusdam dicta, pariatur nemo quo ut voluptates doloremque inventore. Magnam non iusto, deserunt ea! Necessitatibus, sequi.</p>

    </div>

    </div>

    </div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices