I am developing an HTML template, I do need slick to handle a testimonials carousel, but even if I point the div ID with slick nothing happen.
I got no errors in the console.
This is the code I am using:
---- HTML ----
<section id="testimonials">
<h2 class="text-center text-uppercase margin-bottom-3">testimonials</h2>
<div class="row is-full">
<div class="columns large-8 medium-8 hide-for-small-only nopadding">
<img src="assets/img/testimonials-bg.jpg" alt="placeholder"/>
</div>
<div class="large-4 medium-4 small-12 bg-odd rel" id="tSlider">
<div class="text-center margin-3">
<img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
<h5 class="text-capitalize">john doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
</div>
<div class="text-center margin-3">
<img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
<h5 class="text-capitalize">john doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
</div>
<div class="text-center margin-3">
<img src="assets/img/test1.jpg" class="testimonial is-rounded" alt="test1">
<h5 class="text-capitalize">john doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam at deserunt dignissimos doloribus.</p>
</div>
</div>
</div>
<div class="divider"></div>
---- JS ----
$(document).on(ready, function(){
$('#tSlider').slick({
infinite: true,
autoPlay: true,
dots: true,
autoPlaySpeed: 3500
});
});
Related
My problem is as follows: I need to draw the container of a Bootstrap carousel and its items but I want to show for example only 2 containers of the carousel when the items are 6 and 3 containers when the items are 9 and so on, and so forth...
I don't know how to fill the container and draw the container only when a collection of three items are available and when it's more than 3 items how to show more than 1 container.
I need to show containers dynamically I mean, to create them depending on the total collection of three items coming from a JSON request (if you want you don't need to show me the AJAX, only with the algorithm will be ok for me to understand how to resolve my problem).
Here's a sample code I have now:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
<div class="col-4">
<h4>Title</h4>
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I want to draw the items dynamically, for example:
$.ajax({
method: "GET",
url: "API/items.php",
Type: "json",
data: { Event: "store" }
}).done(function( data ) {
data=$.parseJSON(data);
$.each(data,function(index,element){
if((index+1%3)==0){ // I am not quite sure what to put in here
$("#carouselExampleControls .carousel-inner").append(
'<div class="row">'+
'<div class="col-4">'+
'<h4>Title</h4>'+
'<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>'+
'</div>'+
'</div>'
);
}else{
$("#carouselExampleControls .carousel-inner .row").append(
'<div class="col-4">'+
'<h4>Title</h4>'+
'<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>'+
'</div>'
}
})
Thank you and blessings.
You can check if the index % 3 == 0 then use some variable to append outer div i.e : carousel-item then append new rows inside this div and finally if index % 3 == 2 close the outer div . After all records appended you can use .html() to append the generated htmls to your carousel-inner div .
Demo Code :
//dummy datas
var data = [{
"id": 1
}, {
"id": 2
}, {
"id": 3
}, {
"id": 4
}, {
"id": 5
}, {
"id": 6
}, {
"id": 7
}]
var html = ""; //declare this
$.each(data, function(index, element) {
//check if the index is divisble by 3
if (index % 3 == 0) {
//out elemnt appends
html += "<div class='carousel-item'>"
}
//appends rows
html +=
'<div class="row">' +
'<div class="col-4">' +
'<h4>Title</h4>' +
'<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, corrupti.</div>' +
'</div>' +
'</div>' + element.id;
//check if has remainder 2
if (index % 3 == 2 && (index != 0)) {
html += "</div>"; //close outer div
}
})
$(".carousel-inner").html(html) //add result to div
.carousel-item {
background-color: pink
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
</div>
</div>
I took a custom carousel and I tried to make the slides change automatically. However, whatever I try to do I can't find any mistakes. I would much appreciate some help...
I imported bootstrap.min.css and I followed the bootstrap-carousel instructions but still I couldn't make the carousel automatically change after some set time.
https://codepen.io/Ale3andr0s/pen/ExYPWgQ?editors=1100
HTML:
<div class="slider carousel slide" data-ride="carousel">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav active"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner data-interval=100">
<div class="slider__contents active"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
According to Bootstrap documentation, you will need to add
$('.carousel').carousel({
interval: 2000
})
to your code in order to make the carousel cycling through the slides.
If it still doesn't work, you need to change it to
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
Of course, you are going to also need to import both jquery and bootstrap.js, which your code doesn't do.
I have a problem with Jonas von Andrian's jQuery Sortable plugin. When I try to move items, they first fly out of the .row and only after that I can move it normally.
What am I doing wrong?
$(".items-container").sortable({
containerSelector: ".items-container",
itemSelector: ".item",
containerPath: "> .row"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
View on JS Bin
I suggest using itemPath rather than containerPath, based on the "Sort Tables" example.
The documentation is a bit murky to me. It says that itemPath is "The exact css path between the item and its subcontainers." But it seems to me to be the CSS path between the container and its items, which is what containerPath is supposed to define.
I have also added the placeholder option in order to apply Bootstrap styles to the placeholder element.
$(".items-container").sortable({
containerSelector: ".items-container",
itemPath: "> .row",
itemSelector: ".item",
placeholder: '<div class="col-xs-4 panel placeholder"/>'
});
.row .dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>
I'm trying to do something simple with jQuery but having a hard time. I would like to do the following
Loop through each li element and check whether it has a specific class applied 'timeline-inverted'
If the class I'm looking for exists on the li then I would like to apply some further classes 'visible animated fadeInRight'
If the class doesn't exist, then I want to apply an alternative class 'visible animated fadeInLeft'
Here is what I have so far...
HTML Output
<ul class="timeline">
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2010</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted hidden">
<div class="timeline-image">
<img class="img-circle img-responsive" src="assets/img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2014</h4>
<h4 class="subheading">Another great month</h4>
</div>
<div class="timeline-body">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</li><!-- /timeline item -->
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
Be Part
<br>Of Our
<br>Story!
</h4>
</div>
</li><!-- /.timeline -->
</ul>
Jquery
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$('.timeline li').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
If the li item has the timeline-inverted class i want it to fly in from the right and if it doesnt have the timeline-inverted class i want it to fly in from the left!
Thanks paul
*Edit - This code works for me :)
$(function () {
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").viewportChecker({
classToAdd:'visible animated fadeInRight', offset: 100
});
} else {
$(this).removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft', offset: 100
});
}
});
});
You don't need to use each(). You can do it like following.
$('.timeline li.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInRight',
offset: 100
});
$('.timeline li').not('.timeline-inverted').removeClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
TRy this : put your script inside $(function(){..}); and use $(this) instead of $('.timeline li').
$(function(){
$('.timeline li').each(function () {
if ($(this).hasClass("timeline-inverted")) {
$(this).removeClass("hidden").addClass('visible animated fadeInRight').viewportChecker({
offset: 100
});
} else {
$(this).removeClass("hidden").addClass('visible animated fadeInLeft').viewportChecker({
offset: 100
});
}
});
});
I have this slider on my website, I would like to learn how to change the pictures and to edit the content on my own?, I had seeing some videos but everyone work in a different way, so I would like to work for this specific example. This one is part of my own template,
<div class="slider-container">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider_block">
<script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '57.179%',
minHeight: '134px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide1">
<div class="sl_row1">Summer</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide2">
<div class="sl_row1">Free</div>
<div class="sl_row2">Shipping</div>
<div class="sl_row3">on orders over</div>
<div class="sl_row4"><i>$</i>65<strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide3">
<div class="sl_row1">Clearance</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
</div>
</div>
<div class="banners_col">
<div class="tbanner banner1">
<a href="{{store direct_url="brands/piel-leather.html"}}">
<div class="b_holder">
<h2>Top Brands</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner1.jpg" alt="" />
</a>
</div>
<div class="tbanner banner2">
<a href="{{store direct_url="brands/vitalio-vera.html"}}">
<div class="b_holder">
<h2>New Arrivals</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>