I am using single bootstrap carousel and facing one problem. The carousel has several items/images to show, and one of these items must be an active one. Here`s the code:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="**active item**">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
But, I have a one variable for all images in php. I am leaving an active item as blank, and setting loop for item as followingly:
<div class="**active item**">…</div>
{section name=x loop=$similar_data}
<div class="item">…</div>
{/section}
How can I set first picture from all pictures for an active one?
Here`s the link to see how my carousel works.
Here's how to set the first item active with JavaScript:
const carouselInner = document.querySelector('.carousel-inner');
function makeFirstItemActive() {
const firstItem = carouselInner.firstElementChild;
firstItem.classList.add('active');
console.log('first item:', firstItem);
}
makeFirstItemActive();
<div class="carousel-inner">
<div class="item">first item</div>
<div class="item">second item</div>
<div class="item">third item</div>
</div>
Related
My bootstrap carousel is located here: testdomain.org/about.html and when the slide changes, the URL in the address bar remains the same. I want the URL to auto change when the slides change to something like this:
https://testdomain.org/about.html#slide1
https://testdomain.org/about.html#slide2
https://testdomain.org/about.html#slide3
How can we make this happen?I created this JSFiddle Demo for your convenience. I don't know how to go about writing JS for this :(
It's the standard bootstrap HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</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>
</div>
DEMO Screenshot of the URL in the Address bar should look like this
Use the carousel Events to determine when a slide transition happens and which slide has been activated. Then update the address bar and browser history with the slide URL. Instructions for both are at the links below:
http://getbootstrap.com/javascript/#carousel-events
Updating address bar with new URL without hash or reloading the page
Try adding the following javascript, amending references where applicable. You will also need to add an ID to <div class="carousel-inner" role="listbox">. I worked the below off the following - <div class="carousel-inner" id="listbox" role="listbox">.
childsList = Array.prototype.slice.call( document.getElementById('listbox').children );
$("#myCarousel").on('slide.bs.carousel', function (event) {
window.location.hash = "slide" + (childsList.indexOf(event.relatedTarget) + 1);
}
This picks up the event of a slide changing, picks up the index of the slide and sets the '#' in the URL to '#slide[index of slide + 1]'. I hope this helps.
Here is a fiddle doing the same thing but outputting to a rather than the URL. https://jsfiddle.net/JokerDan/22botkvm/
So I am in the process of developing a Bootstrap Carousel Module for a CMS I am using.
The issue I am having is that when the CMS is implementing the carousel using the images uploaded by the user, the active class is missing from the carousel item, therefore, it is not showing up to start with or cycling through the images.
<section class="image-carousel">
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="image1.jpg">
<div class="carousel-caption">
Caption goes here
</div>
</div>
<div class="item">
<img src="image2.jpg">
<div class="carousel-caption">
Caption goes here
</div>
</div>
<div class="item">
<img src="image3.jpg">
<div class="carousel-caption">
Caption goes here
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
I want to use Javascript/JQuery to add an active class to the first item, and then remove this class and add it to the next item in a given interval
How can i do this?
not tested:
//init some variables
var currentItem= 0;
var delay= parseInt($('#carousel').prop('data-interval'));
//set first item active
$('.carousel-inner .item').first().addClass('active');
//wait delay milliseconds to call nextItem function
setInterval(nextItem, delay);
function nextItem(){
//increase index, and loop if necessary
currentItem++;
if (currentItem== $('.carousel-inner .item').length) currentItem= 0;
//remove 'active' class from all items, and add it to the current one
$('.carousel-inner .item').removeClass('active').eq(currentItem).addClass('active');
//wait delay milliseconds to call this function again
setInterval(nextItem, delay);
}
I am implementing a fancy survey with carousel.
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel" style="vertical-align: center">
<!-- 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="n"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
page 1
</div>
<div class="item">
page 2
</div>
...
<div class="item">
page n
</div>
</div>
<!-- Left and right controls -->
<a class="left" 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" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Is there a way to make carousel behave more like a sliding window which mean that it is not possible to go in an n-element carousel:
from Page 1 to Page n
from Page n to Page 1
EDIT
Somehow it seems that i discribed the problem not well enought. So i try better:
So first of all the carousell is in its original purouse meant for displaying pictures:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
i know use different forms inside each "Page" of the carousel.
You can go to the next "Page" of a carousel by clicking on the button on the right or to the last if you click the button on th right.
Now my only problem is - since this shall become a survey - that when Page one with my first question loads, a user can click the button on the left and will go to the end of the carousel (last page/page n).
Is it possible to disable this feature?
I am sure there are more elegant solutions, but this might get you started:
jsFiddle Demo
HTML:
<div class="container">
<div class="row">
<div id="s1" class="slide">
<div class="shead">Slide Title 1</div>
<div class="sbody">Here is body of slide 1 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s2" class="slide">
<div class="shead">Slide Title 2</div>
<div class="sbody">Here is body of slide 2 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s3" class="slide">
<div class="shead">Slide Title 3</div>
<div class="sbody">Here is body of slide 3 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s4" class="slide">
<div class="shead">Slide Title 4</div>
<div class="sbody">Thank you for taking this survey</div>
</div><!-- .slide -->
</div><!-- .row -->
</div><!-- .container -->
JS:
var cnt=1;
$(function(){
$('body').css({'background':'wheat'});
$('#s'+cnt).css({'margin-left':0});
$('button').click(function(){
$('#s'+cnt).animate({
marginRight:'100%'
},500);
cnt++;
$('#s'+cnt).animate({
marginLeft:'0%'
},500,function(){
//reset slide position, in case you wish to add a "Go Back one slide" btn
$('#s'+cnt-1).css({'margin-left':'100%'});
});
});
});//END document.ready
CSS:
html,body{height:500px;width:100%;overflow:hidden;}
div{position:relative;}
.row{height:400px;width:100%;}
.slide{position:absolute;top:0;margin-left:100%;height:100%;width:100%;padding:20px;}
.shead{height:50px;width:100%;color:#aaa;background:#222;}
.sbody{height:300px;width:100%;padding:20px;}
.sfoot{height:50px;width:100%;}
.sfoot button{padding:12px 20px;background:darksteelgrey;color:#888;}
#s1{color:white;background:darkcyan;}
#s2{color:yellow;background:red;}
#s3{color:#333;background:palegreen;}
#s4{color:yellow;background:blue;font-size:2rem;}
I integrated the Bootstrap Carousel (http://getbootstrap.com/examples/carousel/) in my 'comingsoon' homepage: http://247tutors.net/comingsoon/index.html
If you wait for the page to fully load, you will see that the automated slide transitions are not aligning properly (problem occurring in Chrome and Firefox). Each new slide comes in at a level and then once slide/img is covering carousel, i.e., at the end of the slide transition, the slide drops down by ~10px.
Notice my carousel's side panels onHover, leave a gap of about the same amount of pixels at the bottom.
..Can't tell it the error is caused by the navbar css (although, I do have the carousel-style.css being pulled in on the index.html after all other relevant css files (thus, giving carousel-style.css precedent over the class & div settings), or possibly, the error stems from loginDropdown.css (http://247tutors.net/comingsoon/css/loginDropdown.css)..?
Full source code url: view-source:http://247tutors.net/comingsoon/index.html
My Carousel css is here: http://247tutors.net/comingsoon/css/carousel-style.css
Carousel region snippet from index.html:
<script type="text/javascript">var switchTo5x=true;</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/slider/custom/main/a-advanced.png" alt="Advanced Subjects">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Advanced Subjects</h1>
<h4 id="textNormal">We specialize in college
<br />
courses and above.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item active -->
<div class="item">
<img src="images/slider/custom/main/a-available.png" alt="Tutors Available 247">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal" style="color:#222;">24/7 Availability</h1>
<h4 id="textNormal" style="color:#222;">Tutors whenever you need.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-economical.png" alt="Affordable Pricing">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Economical</h1>
<h4 id="textNormal">Pay by the minute, the
<br />
week, or the month.</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
<div class="item">
<img src="images/slider/custom/main/a-ivy.png" alt="Ivy League-level Tutoring">
<div class="container">
<div id="custom247slider" class="carousel-caption">
<h1 id="textNormal">Exceptional Tutors</h1>
<h4 id="textNormal">College graduates from top schools
<br />
in a wide range of disciplines.
</h4>
</div> <!-- END carousel-caption -->
</div> <!-- END container -->
</div> <!-- END item -->
</div> <!-- END carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> <!-- END myCarousel -->
You have to remove the absolute positioning of the .carousel-inner > .item > img class on line 11 of your carousel-style.css style sheet. It should remove the skipping effect! ;)
I'm not sure that this is possible, but I suppose that it is.
I've done a carousel with a form inside. That form contains a textarea and a submit button.
So far, if the mouse pointer is inside the slider, it doesn't slide. Good for now. But if you keep the pointer outside the slider, they start sliding.
I would like to apply some javascript for that textarea, so when someone writes inside the textarea, the slider stops, even if you have the pointer inside or outside the slider.
This is my slider:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/iStock_dogSilverTabby.jpg" />
<div class="carousel-caption">
<h1>Licensed Veterinarians ready to answer your questions, 24 hours a day</h1>
<p>
<form method="POST" action="1.php">
<div class="row">
<h3 style="padding-left:15px;">What is your question?</h3>
<div class="col-md-4 col-md-offset-4">
<textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" required></textarea>
<span class="help-block pull-right" style="color:#fff;">0/250 characters.</span>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit Question</button>
</form></p>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
I hope you understood! Thanks for helping me! I hope this is possible!
Bootstrap has a method for this. You just need to invoke it on focus or click of your element. Something like:
$('input#textareaquestion').click(function() {
$('#myCarousel').carousel('pause');
});
http://getbootstrap.com/javascript/#carousel