We Keep Coding

Setting up bootstrap carousel

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>

Unable to focus on Input Field in Bootstrap Carousel

I am unable to focus on any input field inside bootstrap carousel.
No matter how many times you click on it, the input field is not getting focused.
I even tried giving z-index to the input field but it still doesn't get focused.
You can check the error by running the snippet below.
$(document).ready(function(){
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
});
.carousel-indicators {
position: absolute !important;
bottom: -100px !important;
}
.carousel-indicators li {
background-color: green;
border: 1px solid green !important;
}
.carousel-inner>.item>div {
padding: 30px;
}
.carousel-inner>.item>div>div {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id="skill-builder">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div>
<p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
<div>
<img src="./assets/questions/1-question.jpg" alt="">
</div>
<div>
<input type="text" placeholder="Enter Answer" name="answer">
</div>
<div>
<button>Confirm</button>
</div>
</div>
</div>
<div class="item">
<div>
<p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
<div><img src="./assets/questions/2-question.png" alt=""></div>
<div>
<input type="text" placeholder="Enter Answer" name="answer2">
</div>
<div>
<button>Confirm</button>
</div>
</div>
</div>
<div class="item">
<div>
<p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
<div><img src="./assets/questions/1-question.jpg" alt=""></div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Enable The Touch Slider in Touch Device Only
$(document).ready(function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll: "vertical"
});
}
});

Change touchSwipe version from 1.6.18 to 1.6.4

Bootstrap Carousel to have different URL for each slide

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/

Bootstrap carousel how to hide one item from slider on xs size?

How I can hide one or two items from the bootstrap-carousel only on xs-size ?
When I added class 'hidden-xs' to this item in carousel and item div looks like:
<div class="item hidden-xs">
<img src="imgTop2.jpg" alt="...">
</div>
All the items and the carousel disappeared.
The same problem exist when i add 'hidden-xs' class to img element for this item.
How can I fix that ? I want to hide on xs only one or two slides. Others must by visible.
My code looks like:
<div id="carousel-top" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="hidden carousel-indicators" style="display:none">
<li data-target="#carousel-top" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-top" data-slide-to="1"></li>
<li class="" data-target="#carousel-top" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgTop.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop2.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop3.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop4.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop5.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I can't think of a way to do it just with bootstrap helper classes, because the carousel script depends on the .item class. But you could use the following jQuery:
if ($(window).width() < 960) {
$('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}
You just have to add the class .hide-on-mobile to the items you want to hide on mobile devices.
Working Example

Expanding on Sebsemillia's approach, you can achieve this conditional logic actively on the window resize event. The only catch is that if the element has class "active", you must also remove this class and add it to another slide without the .hide-on-mobile class. See here, using class .no-mobile --
$(function(){
var $window = $(window);
function deviceWidth() {
return $window.width();
}
function toggleMobileSlideVisibility(show_hide) {
$no_mobile_slides = $('.carousel-inner').find('.no-mobile');
if (show_hide === 'hide'){
var reset_active_slide = false;
$no_mobile_slides.each(function(i, e){
if ($(e).hasClass('active')) {
reset_active_slide = true;
$(e).removeClass('active');
}
});
$no_mobile_slides.removeClass('item').addClass('hide');
if (reset_active_slide) {
$('.carousel-inner').find('.item').first().addClass('active');
}
} else if (show_hide === 'show') {
$no_mobile_slides.addClass('item').removeClass('hide');
}
}
var is_mobile_device = false;
var detectMobile = function detectMobile(){
if (deviceWidth() > 978) {
if (is_mobile_device) { toggleMobileSlideVisibility('show'); }
is_mobile_device = false;
} else {
if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); }
is_mobile_device = true;
}
}
$(window).on('resize', function(){
detectMobile();
});
detectMobile();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1920/600/?random&img=2" alt="random">
<div class="carousel-caption">
Just A Slide
</div>
</div>
<div class="item no-mobile">
<img src="https://unsplash.it/1920/600/?random&img=3" alt="random-no-mobile">
<div class="carousel-caption">
A Slide That Should Hide On Mobile
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1920/600/?random&img=4" alt="random2">
<div class="carousel-caption">
Just Another Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Or you can use CSS media query to hide the items you choose on mobile:
#media screen and (max-device-width: 800px) {
.slide-hide-on-mobile { display: none; }
}
You just need to add class="slide-hide-on-mobile" to the items you want to hide:
<div class="item active slide-hide-on-mobile">
<img src="imgTop.jpg" alt="...">
</div>

Stop Bootstrap carousel when typing in textarea

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