I am trying to make a carousel on my website, so that it will automatically change four pictures around. Here is my code, however I am stuck in trying to figure out why it wont change any of the pictures:
<div class="carousel">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#homeCarousel').carousel({
interval:3000,
pause: "false"
});
});
</script>
<!-- Carousel start -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<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>
</ol>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="images/l1.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="images/l2.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="images/l3.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
<!-- Carousel end -->
</div>
I have tried doing changing the interval times, reformatting everything, checking out different post however I just cannot seem to figure it out.
Any idea what could be the problem?
Just to clarify, the bootstrap carousel is heavily dependent on bootstrap CSS. You don't have it in your post, so make sure you have that reference in your page.
After that, your issue is in your <li data-target="#myCarousel"... lines. Those need to reference your carousel div, so they should have data-target="#homeCarousel"
Once I fixed that your code worked for me.
Related
So i'm trying to make a text carousel with text indicators.
My text carousel change perfecly "active" class to an item to another.
But I can't seems to get my indicator ("nav") to change with the carousel his active class to one to another with jQuery.
Here's my HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide vertical" data-ride="carousel" data-interval="3000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div data="0" class="col-md-12">
<p>001</p>
<h2>TEST</h2>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div data="1" class="col-md-12">
<p>002</p>
<h2>TEST</h2>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<p>003</p>
<h2>TEST</h2>
</div>
</div>
</div>
</div>
</div>
<ul class="carousel-nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"><span style="letter-spacing:0.0px;">001</span> <span style="font-size:20px;">•</span> TEST</li>
<li data-target="#myCarousel" data-slide-to="1"><span style="letter-spacing:0.4px;">002</span> <span style="font-size:20px;">•</span> TEST</li>
<li data-target="#myCarousel" data-slide-to="2"><span style="letter-spacing:0.4px;">003</span> <span style="font-size:20px;">•</span> TEST</li>
</ul>
Here's my jQuery
var $carousel = $('#myCarousel');
$carousel.carousel();
var handled=false;
var itemclicked="";
$carousel.bind('slide.bs.carousel', function (e) {
var current=$(e.target).find('.item.active');
var indx=$(current).index();
if((indx+2)>$('.carousel-nav li').length)
indx=-1
if(!handled)
{
$('.carousel-nav li').removeClass('active')
$('.carousel-nav li:nth-child('+(indx+2)+')').addClass('active');
}
else
{
handled=!handled;
}
});
$(".carousel-nav li").on('click',function(){
$(this).addClass('active').siblings().removeClass('active');
handled=true;
});
I'm trying to stop my carousel to auto slide for mobile devices only. I tried to change the data-interval thru js but it's not working for some reason. Any idea how to do it?
Here is my html code for the carousel:
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="img/hero-slide-2.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-3.jpg" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-4d.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
Try first to remove data-ride="carousel" from html, and then use some custom width that you are happy to disable slider for, something like this: (custom BP var is breakpoint)
// set breakpoint width
var BP = 900;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 5000 });
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
My carousel is not sliding properly and I have no idea why. It slides nicely while navigating indicators, but won't slide on its own.
Any ideas why?
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="app/js/bootstrap.min.js"></script>
<!-- Carousel -->
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000,
pause: false
})
});
</script>
Carousel part
<div id="myCarousel" class="carousel slide vertical nicer">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('app/images/6.jpg');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('app/images/23.jpg');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="nicer carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
</div>
You are missing the data attribute to activate the carousel. Change your opening HTML tag to this:
From this:
<div id="myCarousel" class="carousel slide vertical nicer">
To this:
<div id="myCarousel" class="carousel slide vertical nicer" data-ride="carousel">
See more here: http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
So I need to change the text of something that is in a different column depening on which slide is active. I can't seem to figure out where I am going wrong here.
HTML:
<div class="col-sm-6">
<h1>Recent News</h1>
<p id="CarouselMessage">Hello World</p>
</div><!-- Column 6 -->
<div class="col-sm-6">
<div id="Carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#Carousel2" data-slide-to="0" class="active"></li>
<li data-target="#Carousel2" data-slide-to="1"></li>
<li data-target="#Carousel2" data-slide-to="2"></li>
<li data-target="#Carousel2" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" id="newscarousel" role="listbox">
<div class="item active">
<img src="news.png" alt="Chania">
</div>
<div class="item">
<img src="news.png" alt="Chania">
</div>
<div class="item">
<img src="news.png" alt="Flower">
</div>
<div class="item">
<img src="news.png" alt="Flower">
</div>
</div><!-- Carousel inner -->
</div><!-- CAROUSEL 2 -->
</div><!-- Column 6 -->
And here is the javascript to make the p tag with the ID CarouselMessage change depending on which slide is active.
$(document).ready(function () {
var arrMessages = ["this is a test", //set your messages here in an array
"It worked for Image 2 class!",
"It worked for Image 3 class!"]
var $msg = $("#CarouselMessage");
$('#Carousel2').on('slid.bs.carousel', function () {
var text = "",
$active = $('div.active'),
index = $('div.item').index($active); //check the index of active item
$msg.text(arrMessages[index]); //fetch the value from array based on the index of the item and display.
});
});
I have index.html with anchors which i want to navigate to different items in houses.html. houses.html has full page carousel slider with 5 items ill paste only 2 of them.So to be clear inside index.html i have anchors which navigate to houses.html like this :
<li><a id="houses-slide-1" >Stark</a></li>
<li><a id="houses-slide-2" >Lannister</a></li>
and jquery for the anchors :
$('#houses-slide-1').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
$('#houses-slide-2').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
houses.html HTML :
<header id="myCarousel" class="carousel slide">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner" id="slide-one-1">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/ned.jpg');">
<div class="row">
<div class="col-md-5 col-md-offset-2 col-sm-5 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Starks</h2>
</div>
</div>
<div class="item" id="slide-two-2">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/cersei.jpg');">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
<div class="row">
</div>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Lannister</h2>
</div>
</div>
Change your jQuery to “load” the new page at the ID you want:
$('#houses-slide-1').click(function() {
window.location.href = 'sl/houses.html#slide-one-1';
});
$('#houses-slide-2').click(function() {
window.location.href = 'sl/houses.html#slide-two-2';
});
Of course this is a terrible solution. You will have to update every click handler every time you change the ID of the slides.