We Keep Coding

Vue JS set active class and remove other by pressing button

I'm using vue.js to make a webpage. I have 3 class in a page, lets call them A B and C. I want to make 2 buttons, next and prev which will determine which class is active.
For example, if class A is active and the next button is pressed, class A will become inactive and B will be active. Pressing prev button will make class B inactive and A active.
this is my code
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" >
<li data-target="#carouselExampleIndicators" v-for="(carousel, index) in carouselArray" :key="index" :data-slide-to="index"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" v-for="(carousel, index) in carouselArray" :key="index"> //here is the active class
<img :src="carousel.carousel_image_url" class="carousel-img" data-interval="10" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>{{carousel.carousel_caption}}</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev" aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
<span class="sr-only"></span>
</a>
</div>

<template>
<div class='demo'>
<div class="content">
<li :class="value== 1?'activate':'nonactivated'">A</li>
<li :class="value== 2?'activate':'nonactivated'">B</li>
<li :class="value== 3?'activate':'nonactivated'">C</li>
</div>
<button #click="prev">prev</button>
<button #click="next">next</button>
</div>
</template>
<script>
export default {
data() {
//这里存放数据
return {
value:1
};
},
methods: {
prev(){
this.value++;
if(this.value > 3){
this.value = 3;
}
},
next(){
this.value--;
if(this.value < 1){
this.value = 1;
}
},
},
created() {
},
mounted() {
},
}
</script>
<style lang='less' scoped>
</style>

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 3: Hidding carousel controls on first and last items not working

I did get the JS code from: netgloo
JS:
var checkitem = function() {
var $this;
$this = $("#");
if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#diapos .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#diapos").on("slid.bs.carousel", "", checkitem);
HTML:
<div id="diapos" class="carousel paper2 slide" data-ride="carousel">
<!-- diapos -->
<div class="carousel-inner" role="listbox">
<div class="overlay"></div>
<div class="item active" id="first">
<img src="img/01.jpg" alt="...">
</div>
<div class="item" id="second">
<img src="img/02.jpg" alt="...">
</div>
<div class="item" id="last">
<img src="img/03.jpg" alt="...">
</div>
</div>
</div>
<a class="left carousel-control" href="#diapos" 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="#diapos" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
The code is not hidding the respective controls.
There are no other carousels in the document.
By the way, what's the function of this piece of HTML?:
<div class="overlay"></div>

The id of the carousel div is "diapos". So this on the third line should be assigned to that, as 'left' and 'right' are its immediate children :
var checkitem = function() {
var $this;
$this = $("#diapos"); // this line needs to be changed
if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
//continue as before from here
Also, you probably forgot to close the 'diapos' div!

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>

Custom Carousel Intervals?

In Bootstrap 3, with jQuery is there a way to sort by the index of my carousel and add custom intervals of each slide so that I can have one slide 10000ms and another 500ms etc?
I know you can set the data-interval attribute but this sets the speed for all slides as you can't add a custom interval attribute to each item.
data-interval="3000"
My carousel is setup like this:
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#" >
<img class="img-responsive" src="">
</a>
</div>
</div>

You can create a custom attribute that denotes how long the slide should be visible for, pull that out for the active item on the slide.bs.carousel or slid.bs.carousel events (whichever you prefer/works best for you), then set it as a timeout to go to the next slide.
$('#carousel-example-generic').on('slide.bs.carousel', function() {
var interval = $('div.item.active').attr('duration');
setTimeout(function() {
$('.carousel').carousel('next');
}, interval);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" duration="3000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
First
</div>
</div>
<div class="item" duration="2000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Second
</div>
</div>
<div class="item" duration="1000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Third
</div>
</div>
<div class="item" duration="500">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Fourth
</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>

The solution given by #MattD seems to work well, alternatively you could overwrite the slide function of the carousel plugin bu using the following code:
<script src="js/carousel.js"></script>
<script>
$.fn.carousel.Constructor.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval))
return this
}
</script>
The above enables you to set the interval per slide leveraging the data-interval attribute as shown below:
<div class="item" data-interval="500">

The answer by #Bass didn't quite work for me. It was actually taking the interval of the slide BEFORE, so my updated version is:
function overwriteBootstrapCarouselCycleFunction() {
$.fn.carousel.Constructor.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
var element_to_slide;
var duration;
if (this.$element.find('.item.next').size() === 1) { // once the first slide has started the interval until the next call is on the slide with the 'next' class
element_to_slide = this.$element.find('.item.next')
} else {
element_to_slide = this.$element.find('.item.active') // just before the cycle starts, there is no 'next' but the first slide is marked active, use that
}
duration = element_to_slide.data('interval') // if the element has a pre-configured interval use it
if(typeof duration === "undefined") duration = this.options.interval // otherwise use the default for the slideshow
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), duration ))
$.fn.carousel.Constructor.prototype.overwritten = true
return this
}
}
document.addEventListener('DOMContentLoaded', () => {
if (!$.fn.carousel.Constructor.prototype.overwritten)
overwriteBootstrapCarouselCycleFunction()
var id = '#{carousel_id}'
$('#' + id + ' #pause-control').click(function(){
pauseSlideshow(id)
})
$('#' + id + ' #play-control').click(function(){
playSlideshow(id)
})
})