We Keep Coding

Bootstrap: Change "active" class to another "li" - Text carousel

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;
});

Adding Next/Previous option within a Slide using Jquery

I am trying to create a gallery using jQuery everything works but I am not able to add the next/previous arrow option to slide the images once they open up within a modal, Below is the code I am using
<img class="myImg" src="images/test1" alt="test1" >
<img class="myImg" src="images/test2" alt="test2">
<img class="myImg" src="images/test3" alt="test3">
<img class="myImg" src="images/test4" alt="test4">
Below is the jQuery code I am using
<script>
var modal = document.getElementById('myModal');
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
var span = document.getElementsByClassName("close")[0];
</script>
Is there a way to add the next/previous arrows to slide the images once they are open within a Modal?

How about using a plugin to make your life easier?
Here is a plugin called Slide for instance, of course there are so many other options like Amazing Slider.
If you really wanna build it yourself, you can follow this link from W3Schools
For sliders inside a modal you can use Lightbox
Here is a codepen snippet
.modal.and.carousel {
position: fixed;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li>Open Lightbox</li>
<li>2nd Image</li>
<li>3rd Image</li>
<li>Open non existing Image</li>
</ul>
<div class="modal fade and carousel slide" id="lightbox">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ol class="carousel-indicators">
<li data-target="#lightbox" data-slide-to="0" class="active"></li>
<li data-target="#lightbox" data-slide-to="1"></li>
<li data-target="#lightbox" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/900x500/777/" alt="First slide">
</div>
<div class="item">
<img src="http://placehold.it/900x500/666/" alt="Second slide">
</div>
<div class="item">
<img src="http://placehold.it/900x500/555/" alt="Third slide">
<div class="carousel-caption">
<p>even with captions...</p>
</div>
</div>
</div>
<!-- /.carousel-inner -->
<a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.modal-body -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- /.container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

I remove last item and data target its own the carousel-control dose not work.

I have Bootstrap Carousel as shown below
It works fine as it is but when I remove last item and data target its own
the carousel-control dose not work. What could be the issue here, any help please? Thanks....
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
<li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
<li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<!-- Third Slide -->
<div class="item active">
<!-- Slide Background -->
<img src="image/slide1.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel now touch enable slide.</p>
select one
select two
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="item">
<!-- Slide Background -->
<img src="image/slide2.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated flipInX">Bootstrap touch slider</h1>
<p data-animation="animated lightSpeedIn">Make Bootstrap Better together.</p>
select one
select two
</div>
</div>
<!-- End of Slide -->
<!-- Third Slide -->
<div class="item">
<!-- Slide Background -->
<img src="image/slide3.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Beautiful Animations</h1>
<p data-animation="animated fadeInRight">Lots of css3 Animations to make slide beautiful .</p>
select one
select two
</div>
</div>
<!-- End of Slide -->
</div><!-- End of Wrapper For Slides -->
<!-- Right Control -->
<a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Left Control -->
<a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- slider -->
It works fine as it is but when I remove last item and data target its own
the carousel-control dose not work. What could be the issue here, any help please? Thanks....

Bootstrap carousel went chaos

I have a problem with basic bootstrap carousel. I just want slides to move every four seconds, for example. Carousel looks like this:
$(document).ready(function() {
fixCarousel();
});
function fixCarousel() {
$('.carousel').carousel({
interval: 1000*4
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>
But strange things are happening. It works one time, another it waits like 10 sec, then few seconds, then, it goes normally, then, it stops cycling at all...
Any solutions? Thanks.

Here you go with the solution https://jsfiddle.net/zj6bj6cj/
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000*4
});
});
img {
height: 300px !important;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>

Displaying canvas between div background image and rest of div content

I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div 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">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>