Highlighted

Button in carousel on a mobile

Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Create Slideshows in Dreamweaver, Dreamweaver CC 2014, Learn Dreamweaver

Views

2.7K

Likes

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

Button in carousel on a mobile

Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Create Slideshows in Dreamweaver, Dreamweaver CC 2014, Learn Dreamweaver

Views

2.7K

Likes

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
Oct 19, 2017 0
Adobe Community Professional ,
Oct 19, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 19, 2017 2
Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

Thanks Nancy for the info I will take A look at it.

Likes

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
Reply
Loading...
Oct 19, 2017 0
Explorer ,
Oct 19, 2017

Copy link to clipboard

Copied

Hi Nancy,

I do have the bootstrap.min file I just renamed it to ciss but not sure why is acting goofy when placing a button inside carouse.

thanks again Nancy

Will

Likes

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
Reply
Loading...
Oct 19, 2017 0
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 20, 2017 0
Adobe Community Professional ,
Oct 20, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 20, 2017 2
Explorer ,
Oct 20, 2017

Copy link to clipboard

Copied

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/

Likes

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
Reply
Loading...
Oct 20, 2017 0
Adobe Community Professional ,
Oct 20, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 20, 2017 2
Explorer ,
Oct 23, 2017

Copy link to clipboard

Copied

Thanks Nancy for all your help...

But I think is in the css or java because the carousel works great on IE but not on mobile devices and not on chrome... DAMN! I must of miss something here....

Likes

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
Reply
Loading...
Oct 23, 2017 0
osgood_ LATEST
LEGEND ,
Oct 23, 2017

Copy link to clipboard

Copied

williamm86517933  wrote

Thanks Nancy for all your help...

But I think is in the css or java because the carousel works great on IE but not on mobile devices and not on chrome... DAMN! I must of miss something here....

What is clearly stopping access to your link buttons is this 'overlay' <div> directly before your carousel indicators html. I don't know what it is or what it is for. If you remove it your button links will work. At the moment it is sitting over your buttons denying access to them.

  <!-- Overlay -->

  <div class="overlay"></div>

  <!-- Indicators -->

  <ol class="carousel-indicators">

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

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

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

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

      <li data-target="#bs-carousel" data-slide-to="4"></li>

      <li data-target="#bs-carousel" data-slide-to="5"></li>

      <li data-target="#bs-carousel" data-slide-to="6"></li>

      <li data-target="#bs-carousel" data-slide-to="7"></li>

    

    

  </ol>

Likes

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
Reply
Loading...
Oct 23, 2017 0