I'm trying to figure out on how i can modify the plugin to add class when the current slide is show or active. I'm using woothemes flexslider. The reason for this is so that i can add some animation(http://daneden.github.io/animate.css/) on the text when the current slider is active.
-HTML MARKUP-
<div class="flexslider">
<ul class="slides">
<li>
<div class="slide_content slide_copy1">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
</div>
<img src="<?php bloginfo('template_url'); ?>/images/standard_slide2.jpg" />
</li>
<li>
<div class="slide_content slide_copy2">
<iframe src="//www.youtube.com/embed/XjWOqinu_q0" frameborder="0" allowfullscreen></iframe>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
</div>
<img src="<?php bloginfo('template_url'); ?>/images/standard_slide3.jpg" />
</li>
</ul>
</div>
-CSS-
.slides li{position:relative}
.slide_content{position:absolute; }
.slide_copy1{top:50%; left:200px; width:500px; }
.slide_copy1 h2, .slide_copy1 h3{
text-transform:uppercase;
background-color:#0062ad;
display:inline-block;
padding:5px;
margin-bottom:3px;
color:white;
font-family: 'caviar_dreamsregular', sans-serif;
font-size:35px
}
.slide_copy1 p{font-family:'Calibri', sans-serif; color:#0062ad; background-color:white; padding:10px; line-height:20px;}
.slide_copy2{top:25%; right:75px; width:500px}
.slide_copy2 h2{
text-transform:uppercase;
color:#0062ad;
font-family:'caviar_dreamsregular', sans-serif;
font-size:35px;
margin-bottom:20px
}
.slide_copy2 p{
color:#0062ad;
font-family:'Calibri', sans-serif;
line-height:20px;
font-weight:bold
}
-JAVASCRIPT-
<script>
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshow: true,
direction: "vertical",
slideshowSpeed: 4500,
animationSpeed: 2000,
mousewheel: false,
});
});
</script>
This is how I fixed mine:
after: function(slider){
var thumnails = $('.gallery-thumbnails').children();
thumnails.removeClass('active');
thumnails.eq(slider.currentSlide).addClass('active');
}
Related
I have a Bootstrap 4 card carousel with multiple items and when clicked on next or prev button there is some strange transition effect also in the mobile version buttons are not working.
when the card slides to the next or prev cards seem to be on top of one another or of a sec you can see that there are two cards in transiton.
here is my code
<div id="carouselExampleIndicators" class="carousel slide" data-ride=" false">
<div class="carousel-inner py-5">
<div class="carousel-item active ">
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <i class="bi bi-chevron-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <i class="bi bi-chevron-right"></i>
</a>
</div>
CSS
border: 5px solid red !important;
border-radius: 43px;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
padding: .8rem;
height: 480px;
}
.card-img-top .img-fluid {
border-radius: 30px !important;
margin-bottom: 1.5rem;
}
.newscard .card-body h2{
color: var(--secondaryColor);
text-align: left;
font-size: 1.2rem;
}
.newscard .card-body p{
text-align: left;
font-size: 0.7rem;
}
.bi-chevron-left::before, .bi-chevron-right::before {
content: "\f284";
color: white;
opacity: 1;
background: var(--maincolor);
padding: 5px 15px;
border-radius: 50px;
position: absolute;
}
.bi-chevron-left::before {
left: -10px;
}
.bi-chevron-right::before{
right: -10px !important;
}
.carousel-control-prev, .carousel-control-next{
font-size: 1.5rem;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
background: transparent no-repeat center center !important;
}
.carousel-control-next, .carousel-control-prev{
opacity: 1 !important;
}
.carousel-item.active {
display: flex !important;
}
#media (max-width: 768px) {
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex !important;
}
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
}
Jquery and JS
$('#recipeCarousel').carousel({
interval :5000
});
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
<script>
(function($) {
"use strict";
$('.next').click(function() {
$('.carousel').carousel('next');
return false;
});
$('.prev').click(function() {
$('.carousel').carousel('prev');
return false;
});
})
</script>
it may be possibility that you have linked the cdn of other than Bootstrap 4 or you can also try Owl Carousel for responsive layout
Bootstrap 4 Carousel code
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<!-- items or elements that will be used in carousel -->
</div>
<div class="carousel-item">
<!-- items or elements that will be used in carousel -->
</div>
<div class="carousel-item">
<!-- items or elements that will be used in carousel -->
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
please check your cdn or compare your code with this one.
I'm suggesting you to use the Boostrap 5 which is upgrated version
I'm working on tabs. Multiple tabs on the same page are working fine now I'm trying to add tab inside the tab. Nested Sub tabs default, current active class, is not coming i have tried using $(this).parent() and $(this).closest() in jquery but not achieve the result.Here I was not used any id's because I want multiple tabs on the same page which is coming dynamically. Can anyone point me in the right direction nested tab default active tab and I have added the current class in HTML but because of for each loop current class is removing. How to target only the current parent tab, not sub nested tabs.
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).find('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show()
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
click on tabs and again come back to the first tab then nested tab current class is not showing.
The problem is that the find method will find matches in the whole DOM subtree, so when you apply it to a top level tab, it will also match items in the subtabs.
You can solve this by using the children method instead -- sometimes chained to get grandchildren. That way you control at which depth in the DOM tree you want to inspect and modify things.
So change this:
$(this).find('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').find('.current').removeClass('current');
// ...
to:
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').children('.at-tabs-nav')
.children('.current').removeClass('current')
.children('.current').removeClass('current');
// ...
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tabs-nav').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
I'm trying to create a layout where the user will be able to scroll one service section at a time for ex if the user scrolls down from the first section i want the first section to fade out before the second section fades into the same place as the frist section was
here is a link to js bin Click [here] (https://jsbin.com/xubemivaso/edit?html,js,output)
#one, #two, #three, #four
{
padding: 0px;
margin: 0px;
height:100%;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
font-size:3rem;
right: 0px;
left: 0px;
background-color:black!important;
}
#one {
top:0px;
}
#two {
top:100%;
}
#three {
top:200%;
}
#four {
top:300%;
}
.container-outer{
overflow: hidden;
margin:0px;
padding:0px;
width:100%;
height:100%;
position:relative;
}
.container-inner{
overflow:auto;
position:fixed;
width:100%;
height:100%;
padding:30px;
border:30px solid #131313;
margin:0px;
padding:0px;
}
.container-inner::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body itemscope itemtype ="http://schema.org/LocalBusiness">
<div class="cursor"></div>
<div class="cursor"></div>
<div class="container-outer">
<div class="container-inner" id="fullpage">
<nav>
<a class="careers">CAREERS</a>
<a class="services">SERVICES</a>
<a class="about">ABOUT</a>
<a class="find-us">FIND US</a>
</nav>
<div class="slogan">
<h1>SERVICES</h1>
</div>
<div id="one" class="outer section">
<div class="service-inner first">
<p class="service-title-first"></p>
<p class="service-para-first">
Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor
</p>
</div>
</div>
<div id="two" class="outer section">
<div class="service-inner second">
<p class="service-title-second"></p>
<p class="service-para-second">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="three" class="outer section">
<div class="service-inner third">
<p class="service-title-third"></p>
<p class="service-para-third">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="four" class="outer section">
<div class="service-inner fourth">
<p class="service-title-fourth "></p>
<p class="service-para-fourth ">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
</div>
</div>
<script>
(function(container){
$.fn.stopAtTop= function (serv) {
var $this = this,
$container = $(".container-inner"),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($(".container-inner").scrollTop() < thisPos) {
TweenMax.to($this, 0, {"position":"absolute","top":""});
setPosition = over;
}
};
over = function(){
if (!($(".container-inner").scrollTop() < thisPos) ){
TweenMax.to(serv.prev(".service-inner").find('.service-inner'), 1, {"opacity":"0"});
TweenMax.to($this, 0, {"position":"sticky","top":"0px"});
TweenMax.to(serv, 1, {"opacity":"1"});
setPosition = under;
}
};
setPosition = over;
$container.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$container.scroll(function(){setPosition();});
setPosition();
};
})($(".container-inner"));
$('#one').stopAtTop($("#one > .service-inner"));
$('#two').stopAtTop($("#two > .service-inner"));
$('#three').stopAtTop($("#three > .service-inner"));
$('#four').stopAtTop($("#four > .service-inner"));
</script>
I am trying to make a carousel using the owl-carousel plugin but I am having a problem showing the dots. Dots are not being shown despite they are enabled on the javascript. Is it the problem with owl carousel 2? I have tried adding owl-dots class inside the owl-carousel class. It does produce some result but one extra dot is being shown.Here is the fiddle for you :https://jsfiddle.net/aoa9a457/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
CSS( I am just going to show of owl-carousel)
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
Javascript
(function ($) {
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
dots: true,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
}
});
});
}(jQuery));
'owl-dots disabled' class can also show if you do not have enough items to allow the function of the dots.
It seems in your example you have set in the owl carousel config to 'items :4' but only have 3 HTML elements to 'carousel'
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4, <<
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
onInitialized:setDots,
onChanged:setDots
});
});
}(jQuery));
This may be just your HTML markup but going by your example code this would display the 'owl-dots disabled' class as there aren't enough items to cycle.
I couldn't debug why your dots aren't appearing... that been said you can use this work around that removes the disabled class from your DOM, which is currently hiding them. with css you can fix your dots style...
(function ($) {
function setDots(){
$("#testimonial-slides .owl-dots").removeClass('disabled');
}
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
//items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
//onInitialized:setDots,
//onChanged:setDots
});
});
}(jQuery));
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
EDITION As suggested #navigator you are setting 3 elements and declaring four, if you add more elements and set the default configuration you will see the dots appearing...
I'm trying to present an jQuery accordion that is closed initially. Right now, it when you open the page, the first tab opens and I'd like it to be closed by default and opened when a tab is clicked.
Any assistance is appreciated.
<style>
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;
width:960px;}
#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}
#accordion li.active {
width: 450px;
}
</style>
<ul id="accordion">
<li>
<img src="images/section_1.png" />
<strong>Section 1 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<img src="images/section_2.png" />
<strong>Section 2 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<img src="images/section_3.png" />
<strong>Section 3 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
<li>
<img src="images/section_4.png" />
<strong>Section 4 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
activeItem = $("#accordion li:first");
$(activeItem).addClass('active');
$("#accordion li").click(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
</script>
Since your selector depend on a variable activeItem, you just need to define it first, and don't need to add class active to that first element.
Try this:
$(document).ready(function(){
var activeItem;
$("#accordion li").click(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
Demo here
EDIT:
(to open and close)
$(document).ready(function(){
var activeItem;
$("#accordion li").click(function(){
if(activeItem == this){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
activeItem = '';
}else{
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
}
});
});
Demo here
All you need to do is this:
$(document).ready(function()
{
$( "#accordion" ).accordion({ active: false });
}
The option active set the active "panel" of the accordion if(false) no "panel" are active.
Then on click of a panel the "active" option will be set to this "panel" index.