Showing a popup modal when on the 3rd slide with slick js - javascript

hello I have a problem and I have a question about slick.js. I have a feature, I have a slider. If you want to see more about the content, the registration modals will appear.
I have made the code as below. Is it possible,i want the slider runs normally until the 2nd slide and when the 3rd slide will appear the modals register?
and when the user wants to go to slide 3 it will continue to be directed to the modals register so that the user cannot reach the fourth slide. Is that possible?
Can anyone help me? I don't know how
My Codepen
My JS
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $( '.slider__label' );
$slider.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i-1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$progressBarLabel.text( calc + '% completed' );
});
$('.slider-banner').slick({
// arrows: false,
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight' data-toggle='modal' data-target='#exampleModal'><i class='fas fa-chevron-right'></i></button>",
});
My CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh ;
padding: 0;
position:relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh ;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title{
width:55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus{
outline: none;
box-shadow: none;
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus{
outline: none;
box-shadow: none;
}
.pagingInfo{
position:absolute;
bottom: 7%;
left:50%;
transform:translate(-50%,-50%);
}
.progress {
position:absolute;
bottom: 5%;
left:50%;
transform:translate(-50%,-50%);
display: block;
width: 100%;
height: 5px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E ,#ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
My HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

You need to call the modal window if slide index more than 2 and turn slider back to the second slide without animation.
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $('.slider__label');
$slider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if (!slick.$dots) {
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i - 1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
//slide limiter
$slider.on('afterChange',function(e,slick,currentSlide){
if(currentSlide >= 2){
$('#exampleModal').modal('show');
setTimeout(function(){
$slider.slick('slickGoTo',1,true)
},1)
}
})
$('.slider-banner').slick({
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
#bannerHome {
height: 100vh;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh;
padding: 0;
position: relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title {
width: 55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1 {
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft {
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus {
outline: none;
box-shadow: none;
}
.arrowBannerRight {
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus {
outline: none;
box-shadow: none;
}
.pagingInfo {
position: absolute;
bottom: 7%;
left: 50%;
transform: translate(-50%, -50%);
}
.progress {
position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 3px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E, #ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 1.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 2.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 3.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 4.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 5.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 6.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 7.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 8.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 9.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 10.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 11.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 12.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 13.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 14.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

Related

Is there a way where i can put a left arrow above a div?

I have two divs inside a div with width 100%. One div has the width 70% and another one has 30%. What I am trying to do is the 30% div to have Left Arrow** when a link is on active.
Here you can see a little bit about my code and also the image where the design is.
.menu a.active:before {
content: "";
position: absolute;
top: 50%;
left: -21px;
z-index: -1;
height: 30px;
width: 30px;
margin-top: -15px;
background: #FFF;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-opacity: 0.3;
border-left: 5px solid rgba(0, 0, 0, .3);
border-bottom: 5px solid rgba(0, 0, 0, .3);
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
}
.menu a.active {
position: relative;
background: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* width: 250px; */
/* height: 250px; */
/* padding:5px; */
z-index: 1;
border-opacity: 0.3;
/* border: 5px solid rgba(0, 0, 0, .3); */
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
}
<div id="featured">
<!--div with width 70%-->
<div class="fragments-together ">
<div class="slider">
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
</div>
<div class="overlay-slider"></div>
</div>
<ul class="ui-tabs-nav">
<div class="menu">
<a href="#" data-picindex="1">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </h2>
</a>
<a href="#" data-picindex="2">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>European youth gathered in Buzau at the end of the year</h2>
</a>
<a href="#" data-picindex="3">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </h2>
</a>
<a href="#" data-picindex="4">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </h2>
</a>
</div>
</ul>
</div>
Is there any way where i can add an arrow to the div? I am using a slider, and this is a slider..
Thank you for your time!!

Jquery — Set child to fill remaining width of parent

I am building a responsive layout. I would like to know if anyone knows a way through JS/jQuery which I can set children to fill the remaining space of a parent only if there is space to fill (to the right).
Layout when above 900px
Layout when below 900px
HTML for reference
.row {
width: 100%;
}
.colm-span-2 {
position: relative;
float: left;
margin: 15px auto;
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
background-clip: content-box;
}
.colm-span-2 {
width: 33.3333333333%;
}
#media screen and (max-width: 900px) {
.colm-span-2 {
width: 50%;
}
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
I would suggest adding:
.colm-span-2:last-child {
width: 100%;
}
to your media query. This will change the final .colm-span-2 to have a 100% width.
With flexbox and :last-child (assuming you have rows) this is possible
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.bg-white {
background: whitesmoke;
}
.bg-cta-green {
background: green;
}
.bg-dark-purple {
background: rebeccapurple;
}
.row {
display: flex;
}
.colm-span-2 {
flex: 0 0 33%;
margin: .25em;
border: 1px solid grey;
}
.colm-span-2:last-child {
flex: 1;
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

Jquery on click delays toggle class

I'm trying to add class and change the button colors when clicking, all is working great but I've noticed that when i clicked the button there is a small delay - so when i click - first the tab changed it's content - and on the next click - it's toggling the class...and changing the color
Here is my Fiddle
Or my Plunker - in case fiddle don't work (i experienced some issues)
Here is the CODE
$(document).ready(function(){
$('.tabs_div > li > a').on('click', function() {
$.each($('.tabs_div > li'), function() {
if ($(this).attr('class')) {
$(this).find('a').find('span').toggleClass('active_bullet');
}
});
});
$('.next_btn').click(function() {
$('.tabs_div > .active').next('li').find('a').trigger('click');
});
});
.content-wrapper.parme_vous_page {
background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
}
.sidebar-menu .sidebar-item-special.active {
background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px) !important;
}
.sidebar-menu li.active > a > .sidebar-item-label,
.sidebar-menu li.active > a > span > .pull-right {
color: rgb(255, 255, 255) !important;
}
.sidebar-menu .sidebar-item-special.active:before {
right: 0;
top: 25%;
content: " ";
position: absolute;
pointer-events: none;
margin-top: -30px;
width: 21px;
height: 30px;
/* background: #f00; */
background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
.parme_vous_icon {
width: 200px;
height: 200px;
background-color: #3f4760;
}
div.content-wrapper.parme_vous_page > div > div.page_container {
width: 100%;
margin-top: 25vh;
}
div.content-wrapper.parme_vous_page > div > div.page_container > div.row {
margin-right: 51px !important;
margin-left: 0px;
}
.links_col {
min-width: 160px;
min-height: 200px;
border-radius: 15px;
background-color: white;
overflow: hidden;
margin-bottom: 25px;
-webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
-moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
}
.logo_header {
padding-top: 10%;
text-align: center;
min-height: 100px;
}
.logo_header img {
width: 55px;
}
.logo_footer {
padding: 15px;
color: white;
text-align: center;
background-color: #3f4760;
min-height: 100px;
}
.logo_footer p:nth-child(1) {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
.logo_footer p:nth-child(2),
.logo_footer p:nth-child(3) {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #aaadb5;
}
#myTab {
list-style-type: none;
}
#myTab > li > a > span.tab_circle {
/*border: 2px solid white;*/
background-color: #5d3c95;
height: 10px;
border-radius: 50%;
width: 10px;
}
.active_bullet {
border: 2px solid white;
height: 15px;
border-radius: 50%;
width: 15px;
}
#myTab > li > a > span.tab_toggler {
display: inline-block!important;
float: none!important;
margin-left: -20px;
font-size: 20px;
color: white;
}
.next_btn> i {
display: inline-block;
border-radius: 73px;
border: 8px solid white;
background-color: white;
}
.next_btn {
position: fixed;
bottom: 20px;
margin-left: 40%;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%; background-color: grey;">
<!-- container -->
<div class="page_container">
<div class="row">
<div class="links_buttons col-md-2">
<ul id="myTab" class="tabs_div">
<li class="active"><a data-target="#first" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li>
<li><a data-target="#second" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li>
<li><a data-target="#third" data-toggle="tab"><span class="tab_circle tab_toggler"></span></a></li>
</ul>
</div>
<div class="links_cont col-md-10">
<div class="tab-content">
<!---------------------------------------------FIRST TAB-------------------------------------------------->
<div class="tab-pane active" id="first">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Blog</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Mon compte</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------SECOND TAB-------------------------------------------------->
<div class="tab-pane" id="second">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Blog</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Mon compte</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------THIRD TAB-------------------------------------------------->
<div class="tab-pane" id="third">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Blog</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Mon compte</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="next_btn">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
Use This :
$(document).ready(function(){
$('.tabs_div > li[class] > a').click(function(){
$('span',this).toggleClass('active_bullet');
})
})
$(document).ready(function(){
$('.tabs_div > li[class] > a').click(function(){
$('span',this).toggleClass('active_bullet');
})
})
.content-wrapper.parme_vous_page {
background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
}
.sidebar-menu .sidebar-item-special.active {
background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px) !important;
}
.sidebar-menu li.active > a > .sidebar-item-label,
.sidebar-menu li.active > a > span > .pull-right {
color: rgb(255, 255, 255) !important;
}
.sidebar-menu .sidebar-item-special.active:before {
right: 0;
top: 25%;
content: " ";
position: absolute;
pointer-events: none;
margin-top: -30px;
width: 21px;
height: 30px;
/* background: #f00; */
background: repeating-linear-gradient(-45deg, #92deda, #92deda 3px, #49c8c1 2px, #49c8c1 8px);
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
.parme_vous_icon {
width: 200px;
height: 200px;
background-color: #3f4760;
}
div.content-wrapper.parme_vous_page > div > div.page_container {
width: 100%;
margin-top: 25vh;
}
div.content-wrapper.parme_vous_page > div > div.page_container > div.row {
margin-right: 51px !important;
margin-left: 0px;
}
.links_col {
min-width: 160px;
min-height: 200px;
border-radius: 15px;
background-color: white;
overflow: hidden;
margin-bottom: 25px;
-webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
-moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
}
.logo_header {
padding-top: 10%;
text-align: center;
min-height: 100px;
}
.logo_header img {
width: 55px;
}
.logo_footer {
padding: 15px;
color: white;
text-align: center;
background-color: #3f4760;
min-height: 100px;
}
.logo_footer p:nth-child(1) {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
.logo_footer p:nth-child(2),
.logo_footer p:nth-child(3) {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #aaadb5;
}
#myTab {
list-style-type: none;
}
#myTab > li > a > span.tab_circle {
/*border: 2px solid white;*/
background-color: #5d3c95;
height: 10px;
border-radius: 50%;
width: 10px;
}
.active_bullet {
border: 2px solid white;
height: 15px;
border-radius: 50%;
width: 15px;
}
#myTab > li > a > span.tab_toggler {
display: inline-block!important;
float: none!important;
margin-left: -20px;
font-size: 20px;
color: white;
}
.next_btn> i {
display: inline-block;
border-radius: 73px;
border: 8px solid white;
background-color: white;
}
.next_btn {
position: fixed;
bottom: 20px;
margin-left: 40%;
}
<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/3.2.1/jquery.min.js"></script>
<body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%; background-color: grey;">
<!-- container -->
<div class="page_container">
<div class="row">
<div class="links_buttons col-md-2">
<ul id="myTab" class="tabs_div">
<li class="active"><a data-target="#first" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item1(Clickable)</a></li>
<li><a data-target="#second" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item2Item3[have'nt class]</a></li>
<li><a data-target="#third" data-toggle="tab"><span class="tab_circle tab_toggler"></span>Item3[have'nt class]</a></li>
</ul>
</div>
<div class="links_cont col-md-10">
<div class="tab-content">
<div class="tab-pane active" id="first">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Blog</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Mon compte</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="second">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Blog</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Mon compte</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="third">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Blog</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Facebook</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Mon compte</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="links_col">
<div class="parme-vous_links">
<div class="logo_header"><img src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png" /></div>
<div class="logo_footer">
<p>Fonctionnalité</p>
<p>Lorem ipsum dolor</p>
<p>sit amet consectuer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="next_btn">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
Update post :
If you want work on all buttons,remove [class] in selector like this:
$(document).ready(function(){
$('.tabs_div > li > a').click(function(){
$('span',this).toggleClass('active_bullet');
})
})
If you want when click on button, remove affect of other buttons,use this code:
$(document).ready(function(){
$('.tabs_div > li > a').click(function(){
$('.tabs_div > li > a span').removeClass('active_bullet');
$('span',this).toggleClass('active_bullet');
})
})

CSS columns separating divs

I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..
Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

Bootstrap nested carousels active controls

I have a problem with Bootstrap nested carousels;
On click of the intern carousel it changes also the the active li of the extern carousel, which ist not correct.
Also on click on the extern carousel controls, the intern carousel don't work any more.
Can anyone help?
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel > .controls li.active').removeClass('active');
$('#custom_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
});
$('#intern_carousel').on('slide.bs.carousel', function (evt) {
$('#intern_carousel > .controls .active').closest('li').removeClass('active');
$('#intern_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
});
.jumbotron.carousel-slider, .slider-cont > .row > div { padding: 0; }
.jumbotron .img-responsive { margin-bottom: 15px; }
.slider-cont {
max-width: 100% !important;
width: 100% !important;
padding: 0;
}
/* Override default Bootstrap classes */
.carousel-inner { font-size: 12px; }
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
width: 100% !important;
}
#custom_carousel .carousel-inner > .item > a > img, #custom_carousel .carousel-inner > .item > img,
#custom_carousel .img-responsive, #custom_carousel .thumbnail a > img, #custom_carousel .thumbnail > img {
width: 100% !important;
}
.slider-cont > .row { margin: 0; }
#custom_carousel .carousel-control .glyphicon-menu-left, #custom_carousel .carousel-control .glyphicon-menu-right { top: 45%; right: 50%; font-size: 36px; position: inherit; }
/*#custom_carousel .carousel-control { border: 2px solid red; }*/
#custom_carousel .item {
color:#000;
background-color:#eee;
}
#custom_carousel .controls{
overflow-x: auto;
overflow-y: hidden;
padding:0;
margin:0;
white-space: nowrap;
text-align: center;
position: relative;
background:#ddd;
}
#custom_carousel .controls li {
display: table-cell;
width: 1%;
max-width:90px;
/*background-color: rgb(234,234,234); opacity: 0.2;*/
}
#custom_carousel .controls li.active {
border-top:3px solid #e53d20;
position: relative;
}
#custom_carousel li.active a { font-weight: bold; }
#custom_carousel img { margin: 0; }
#custom_carousel .controls > .nav a {
color: #6e6e6e;
font-size: 16px;
/*font-weight: 400;*/
padding: 18px 15px;
}
/* ******************* BEGIN Interne Carousels ******************* */
.interne-carousel {
background-color: #ffff00;
bottom: 142px;
height: 150px;
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
width: 500px;
}
#intern_carousel {
width: 500px;
left: 0;
margin: 0 auto;
padding: 0;
}
#intern_carousel .item { text-align: center; }
#intern_carousel img { border: 2px #a29e9e solid; }
#intern_carousel .controls li.active img { border: 2px red solid; }
#intern_carousel .carousel-control { color: red; background: none; }
#intern_carousel .controls li.active, #intern_carousel .controls li.active {
border-top: 3px solid yellowgreen;
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron carousel-slider">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<!-- Begin Carousel -->
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive">
<div class="interne-carousel">
#####!!! interne-carousel !!!#####
<!-- Begin Interne Carousel -->
<div id="intern_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 1</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 2</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 3</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<a class="left carousel-control" href="#intern_carousel" data-slide="prev"><span
class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#intern_carousel" data-slide="next"><span
class="glyphicon glyphicon-menu-right"></span></a>
<div class="controls">
<ul class="nav">
<li data-target="#intern_carousel" data-slide-to="0" class="active">
<img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/>
</li>
<li data-target="#intern_carousel" data-slide-to="1">
<img src="http://placehold.it/75x44/999999/cccccc" alt=""/>
</li>
<li data-target="#intern_carousel" data-slide-to="2">
<img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/>
</li>
</ul>
</div>
</div>
<!-- End Interne Carousel -->
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<a class="left carousel-control" href="#custom_carousel" data-slide="prev"><span
class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#custom_carousel" data-slide="next"><span
class="glyphicon glyphicon-menu-right"></span></a>
<div class="controls">
<ul class="nav">
<li data-target="#custom_carousel" data-slide-to="0" class="active">
Lorem Ipsum
</li>
<li data-target="#custom_carousel" data-slide-to="1">
Sed ut perspiciatis
</li>
<li data-target="#custom_carousel" data-slide-to="2">
Lorem Ipsum
</li>
<li data-target="#custom_carousel" data-slide-to="3">
Sed ut perspiciatis
</li>
</ul>
</div>
</div>
<!-- End Carousel -->
</div>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
basically, nested carousel is not supported, find more information on github
But you can try for some workaround (worked for me), like an example below (i'm using jquery), where i will temporarily change the "active" class of item insides child-carousel(s). And add it back after the event on parent carouse has completed
btn.on("click", function () {
/*
Fix for Nested Carousel:
Before any sliding action, need to "hide" inner carouse active items
After sliding action, update active items again
*/
$.each(carourselInnerHolder.find(".child-carousel.active"), function (i, item) {
$(item).removeClass("active").addClass("active-fix-nested");
});
setTimeout(function() {
Metronic.unblockUI(); //blockUI to avoid multiple actions immediately
}, 200);
carouselHolder.carousel(carouselIndex); // action that trigger update parent Carousel to slide to new item with this index
$.each(carourselInnerHolder.find(".child-carousel.active-fix-nested"), function (i, item) {
$(item).addClass("active").removeClass("active-fix-nested");
});
/*
END Fix for Nested Carousel
*/
});

Categories

Resources