I need code in jQuery to show 6 div's per slide. I have slider, and I want show only 6 div's/elements and after 6 div the code will be create next slide(div with class slide)
<div class="slide">
<div>
6elements
</div>
</div>
next slide => <div> 6 elements </div>
Slick slider
Here is a working Plunker that shows how to implement the jQuery/Slick plugin with responsive break points.
The documentation for Slick provides several options for your slides.
Javascript
$('#slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
responsive: [{
breakpoint: 600,
settings: {
slidesToShow: 1,
rows: 2,
slidesPerRow: 2,
}
}]
});
HTML
<div id="slick">
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/alhBkw5.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/Qdqaawt.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/Bplxu8k.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/fixuYTj.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/9hpqKt0.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/9VCx5.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/scV4kAY.png"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/PfDrZOZ.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/lxMUSqZ.jpg"></div>
</div>
<div class="slide">
<div class="img-container"><img src="http://i.imgur.com/wD1r3Yk.png"></div>
</div>
</div>
CSS
.img-container {
overflow: hidden;
max-height: 100px;
margin: 3px 5px;
}
.img-container img {
width: 100%;
}
#slick {
/* optional */
max-width: 700px;
margin: 50px auto;
}
Wordpress Function
Here is a Wordpress demo of the following php function.
PHP
Add this function to your functions.php file:
function six_images_slider() {
$args = array('numberposts' => 18);
$recent_posts = wp_get_recent_posts( $args );
$output = '<div id="slick">';
foreach ($recent_posts as $post) {
$featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) );
$output .= '<div class="slide"><div class="img-container"><img src="'.$featured_image_src.'"></div></div>';
}
$output .= '</div>';
echo $output;
}
Add this to your home.php template file:
<?php six_images_slider(); ?>
Also, it should work in any Wordpress template file.
Function Explanation
This function gets the most recent 18 posts by calling wp_get_recent_posts.
Then it loops through the posts and gets the featured image by calling get_post_thumbnail_id and passing the result to wp_get_attachment_url to get the src.
Related
I'm using Owl Carousel 2, center. I need help for something as shown on picture. Basically I have 6 items, 2 of them under same category
Title 1: 1 and 1a
Title 2: 2 and 2a
Title 3: 3 and 3a
When click on "Title 1", it will move to 1, but not 1a, click on "Title 2" will move to 2 and so on.
Hoping that some of you could provide me with some advice. Thank you!
$(document).ready(function($) {
$('.loop').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
nav: true,
responsive: {
600: {
items: 5
}
}
});
});
h4{
border: 1px solid black;
text-align: center;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
Title 1
TItle 2
TItle 3
<div class="loop owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>1a</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>2a</h4>
</div>
<div class="item">
<h4>3a</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
</div>
Change items code in your Carousel in this way:
<div class="loop owl-carousel owl-theme">
<div class="item" data-hash="one">
<h4>1</h4>
</div>
<div class="item">
<h4>1a</h4>
</div>
<div class="item" data-hash="two">
<h4>2</h4>
</div>
<div class="item">
<h4>2a</h4>
</div>
<div class="item">
<h4>3a</h4>
</div>
<div class="item" data-hash="three">
<h4>3</h4>
</div>
</div>
Titles change in this way:
Title 1
TItle 2
TItle 3
And Carousel initialization in this way:
$(document).ready(function($) {
$('.loop').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
nav: true,
URLhashListener: true, //1. this string added
startPosition: 'URLHash', //2. this string added
responsive: {
600: {
items: 5
}
}
});
});
More details see in oficial docs: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav
I am working on a slider, when mouse hovers over logo the details will show, and when mouse hovers out from its parent div it should hide.
jQuery('.st_inner img').mouseover(function() {
jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function() {
jQuery('#spon_detail').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="https://placehold.it/200x50">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
<?php
echo $spon_key;
?>
</div>
</div>
</div>
You forgot to add the class on img element. There is no element using sponsor_thumb class
jQuery('.st_inner img').mouseover(function(){
jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function(){
jQuery('#spon_detail').fadeOut();
});
.key_val{
width : 400px;
height : 400px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img class="sponsor_thumb" src="<?php echo $post_thumb ?>">
</div>
<div id="spon_detail" style="display:none">
<div id="dt_inner">
<h4>Company Profile</h4>
</div>
</div>
</div>
Not sure what you are trying to achive but what you might be missing is hiding the element before you want to fade it in
jQuery('.st_inner img').mouseover(function(){
jQuery( this ).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.sponsor_thumb').mouseout(function(){
jQuery('#spon_detail').fadeOut();
});
#spon_detail{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="<?php echo $post_thumb ?>">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
<?php
echo $spon_key;
?>
</div>
</div>
</div>
I think you missed to add .st_inner img on mouseout function.
jQuery('.st_inner img').mouseenter(function() {
jQuery(this).parent().siblings('#spon_detail').fadeIn();
});
jQuery('.key_val').mouseleave(function() {
jQuery('#spon_detail').fadeOut();
});
#spon_detail{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="key_val">
<div class="st_inner">
<img src="https://dummyimage.com/300.png/09f/fff">
</div>
<div id="spon_detail">
<div id="dt_inner">
<h4>Company Profile</h4>
</div>
</div>
</div>
You can also check this https://jsfiddle.net/a6ekejz5/1/
Hope this will help you.
i'm trying to make captions in owl carousel. i'm using animate.css.
I've added animation to captions in carousel but it's not working for all. Only first slides caption have animation. Here is my code;
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Fourth Caption</h1></div>
</div>
</div><!-- End Carousel -->
<style>
.caption {
position: absolute;
font-size: 1.5em;
top: 0;
left: 15px;
border:1px solid;
color:orange;
text-shadow: 2px 2px 1px #000;
padding-top: 60vh;
}
</style>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:3500,
nav:true,
})
});
</script>
I'm waiting your help about that. I'm stuck
The animation is only applied once when the class is applied to a div. Therefore all of your slides animate once at the start only, but you can only see the first div, and so nothing else happens.
If you watch for slide changes in the carousel and then remove the 'animate bounce' classes from all divs before instantly re-applying it to the one on screen then you can see each one animate.
Try this jquery:
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3500,
nav: true,
margin: 10,
});
owl.on('changed.owl.carousel', function(event) {
var item = event.item.index - 2; // Position of the current item
$('h1').removeClass('animated bounce');
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce');
});
});
and then in your html only use the 'animate bounce' classes for the first slide (remove it from the others):
<div id='monitor'>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Fourth Caption</h1></div>
</div>
</div>
<!-- End Carousel -->
This is working infinite. Look at this example of owl.carousel : http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/ You had to remove class animated after change but this function is missing in owl.carousel 2: afterMove and beforeMove
We are implementing owl carousel It is fine on desktop view on all resolutions, but flickering complete page which contains that owl carousel on tablet view (ipad).
HTML Code:
<div class="col-md-12">
<div class="row">
<div class="text-center" id='answersheet_status'></div>
<div class="col-sm-12 col-md-12">
<div class="text-center" id='assessment_feedback'>
<!--<i class="fa fa-times">y</i>-->
</div>
</div>
</div>
<div class="row" id="main_div_section">
<div class="col-md-12 question-section">
<div id="section_div" class="col-md-12 owl-carousel owl-theme" style="padding:0 20px;"></div>
</div>
</div>
<div class="alernate_div_section hide" id="alernate_div_section"></div>
<div class="col-md-12 no-padding mt15">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="section-result"></div>
<div class="col-md-12 no-padding mt15" id="questions_div">
</div>
<div class="clearfix"></div>
<div class="question-footer"></div>
</div>
</div>
</div>
</div>
Js code:
var carousel = $('.owl-carousel');
carousel.owlCarousel({
rtl: false,
margin: 10,
nav: true,
loop: false,
mergeFit: true,
startPosition: start_pos,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
},
1200: {
items: 4
},
1400: {
items: 5
}
}
});
Note: If we remove that owl carousel, then the page works fine at all. We don't want that flickering on ipad (tabletview), why this happens? any solution? please suggest.
(owl carousel Version used : version 2.0.0)
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
z-index: 1; // added this
}
Please add the above code in your css file , and see that the class are define in html code ...
This works fine with me ....
For the mobile version of our website we use the iDangerous Swiper (2.4.3) to display product images and for the desktop version we use a carousel.
The mobile version uses the same images and order as our dekstop version, because
both versions use the same database query.
/*
* Carrousel
*/
$q = "
SELECT
c.id,
CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url
FROM
product_carrousel c
WHERE
c.product_id = '" . $product_id . "'
ORDER BY
c.order ASC
";
$r["carrousel"] = $this->db->select($q);
What we want to accomplish: The mobile version we want to display an other start image. Is there a way for the iDangerous Swiper (2.4.3) to have a specific start slide or offset -1 slide (so it starts with the last image). This way i can upload the specific start image for mobile as last image, and have that one displayed first only on mobile.
HTML/PHP Mobile version:
<div class="swiper-container product-slider">
<div class="swiper-wrapper">
<?php foreach ($product['carrousel'] as $x => $item):?>
<div class="swiper-slide">
<figure class="swiper-slide-img">
<img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/>
</figure>
</div>
<?php endforeach; ?>
</div>
HTML Output Mobile:
<div class="swiper-container product-slider done">
<div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div class="swiper-slide" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
<figure class="swiper-slide-img">
<img src="" alt="">
</figure>
</div>
</div>
Partial solution:
In idangerous.swiper.min.js i found the setting: initialSlide.
Changing that to -1 makes the slider start with the last slide in mobile.
I've added to ui.js the following:
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});
},
Problem: The last pagination (in this case the active one) doesnt get the active class. Only on swipe it shortly gets the active pagination class, and then immediatly switches to the current active one.
On load:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
While dragging/swiping:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
</div>
After swipe:
<div class="swiper-pagination swiper-ready">
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch"></span>
<span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
<span class="swiper-pagination-switch"></span>
</div>
Solution
initSliders: function() {
$('.swiper-container').each(function(){
var paginationContainer = '.' + $(this).next().attr('class');
if($(this).hasClass('product-slider')) {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: -1,
pagination: paginationContainer,
calculateHeight: true
});
$(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch");
} else {
var mySwiper = $(this).swiper({
mode:'horizontal',
loop: true,
initialSlide: 0,
pagination: paginationContainer,
calculateHeight: true
});
}
$(this).addClass('done');
$(this).next().addClass('swiper-ready');
});