I'm trying to make a product carousal. i have used swiper.js but it is not working
i have set of 4 products show in a row and i want to make a carousal for mobile too having only 1 product in one row and swipe to see others
here is my code
<div class="row mt-5">
<?php if ($wc_query->have_posts()) : ?>
<div class="swiper-container">
<div class="swiper-wrapper">
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<div class="swiper-slide mob mx-auto col-md-2">
<div class="border-box">
<?php the_post_thumbnail(); ?>
</div>
<center><h3 class="box-bottom"><?php the_title(); ?><h3>PKR:<?php echo $product->get_price();?></h3></h3></center>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<?php else: ?>
<li>
<?php _e( 'No Products' ); ?>
</li>
<?php endif; ?>
</div>
JS CODE
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
Related
I've been using the swiper.js javascript library to create a slider with vertical thumbnails, where if you click the thumbnail, the main image will "slide" to that image.
The functionality works perfectly when I manually click on a thumbnail, however, I need to change the main image when the user selects the color swatches as well. I've called the javascript function click() on the thumbnail element, I've tried calling click() on both the img itself and the div containing the img. Unfortunately I'm not seeing the same functionality, my click event does register, and I am able to console log/change the border of the thumbnail, but it doesn't run the swiper.js function "onThumbClick":
There is a function in swiper.js called "onThumbClick" which I've done a console log in, and I've noticed that it is not being called when I use javascript click() but it is being called when I click it manually.
I'm definitely no javascript pro so I'm not exactly sure what's happening here.
EDIT - adding some code snippets
HTML
<div class="wrapper">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<?php foreach ($gallery as $image): ?>
<?php if ($this->isGalleryImageVisible($image) and (strpos($image->getLabel(), 'swatch')) === false) : ?>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $image->getFile())->resize($imgWidth, $imgHeight); ?>" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $image->getFile()); ?>"/>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php if (count($gallery) > 0): ?>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<?php foreach ($gallery as $image): ?>
<?php
$url = $image->getUrl();
$endUrl = strrpos($url, '/');
$sku = $endUrl === false ? $url : substr($url, $endUrl + 1);
?>
<?php if ($this->isGalleryImageVisible($image) and (strpos($image->getLabel(), 'swatch')) === false) : ?>
<div class="swiper-slide thumbnails" data-sku="<?php echo $sku?>">
<img src="<?php echo $image->getUrl() ?>" data-sku="<?php echo $sku?>"/>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
Javascript (Init Slider)
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
direction: 'vertical',
spaceBetween: 10,
slidesPerView: 6,
freeMode: true,
watchSlidesVisibility: false,
watchSlidesProgress: false,
speed: 0,
});
var galleryTop = new Swiper('.gallery-top', {
zoom: {
maxRatio: 5,
},
spaceBetween: 10,
direction: 'horizontal',
thumbs: {
swiper: galleryThumbs
},
//preventing zoom containers from appearing over inactive swiper images
on:{slideChange: function() {
jQuery('.zoomContainer').remove();
}}
});
jQuery('.swiper-zoom-container').children('img').mouseover(function(){
jQuery(this).elevateZoom();
});
</script>
Calling click on my thumbnail:
jQuery(".thumbnails[data-sku='" + sku + "']").click(function(e) {
console.log('click');
console.log(jQuery(".thumbnails[data-sku='" + sku + "']"));
jQuery(".thumbnails[data-sku='" + sku + "']").css('border', '1px solid black');
});
jQuery(".thumbnails[data-sku='" + sku + "']").click();
Here is solution for this
Here is my code
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: {
0: {
slidesPerView: 3,
},
992: {
slidesPerView: 4,
},
}
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
},
});
Whenever you select swatch from dropdown
$('select[name=p_option]').on('change',function(){
var indexToMove = $('option:selected', this).attr('data-val');
galleryTop.slideTo(indexToMove,1000,false);
});`
Here is html in my case there are shades in dropdown
<select class="form-control" name="p_option">
<option>Select Shade</option>
<option data-val="0" value="0">0</option>
<option data-val="1" value="1">1</option>
<option data-val="2" value="2">2</option>
<option data-val="3" value="3">3</option>
</select>
NOTE: Just display images in thumbs in same sequence as in select Dropdown because swiper slideTo function slides images using INDEX
I have implemented slick (http://kenwheeler.github.io/slick/) and everything is fine except the first slide is the first image shown rather than the one clicked on from the list of images, say image 5, image 1 would be displayed. I am using PHP to try and automate the process.
The col-sm-4 while loop displays all the images on the page, then when clicked a modal with the slick will popup and display the images inside the modal. As I said this process works fine, except the position of the image that is clicked. For eg, I click image 6 from the col-sm-4 list of images, but image 1 is displayed.
I would appreciate any assistance from the community. Thanks
**UPdate .. add a data/var and counter menuid to each div, I am just not sure how to access it in the Slick JS initialSlide option shown below: **
<div class="row">
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery);
while ($row = mysqli_fetch_array($value))
{ ?>
<div class='col-sm-4'>
<a title='<?php echo($row[0]); ?> href='#'>
<img class='thumbnail img-responsive images' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
<p class='images text-center'><?php echo($row[0]); ?></p>
<p id="demo"></p>
</a>
</div>
<?php } ?>
<div class='modal' id='modal-gallery' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' type='button' data-dismiss='modal'>×</button>
<h3 class='modal-title text-center'></h3>
</div>
<div class='modal-body'>
<div id='modal-carousel' class='text-center'>
<div class='your-content'>
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery); $counter = 0;
while ($row = mysqli_fetch_array($value))
{ ?>
<div id="menulist" data-menuid="<?php echo $counter++; ?>">
<h1>'<?php echo($row[0]); ?>'</h1>
<img class='modal-thumbnail' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
</div>
<?php } ?>
</div>
</div>
<div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/slick/slick/slick.js"></script>
<script>
$('.thumbnail').click(function(){
$("#modal-gallery").modal("show");//.modal('show')/.modal('hide');
});
var menulist = $("#menulist");
var menuid = menulist.data("menuid");
$( "#menulist" ).click(function() {
var myId = $( "#menulist" ).data("menuid");
$( "#menulist" ).attr("menuid", myId);
});
$(document).ready(function(){
$('.your-content').slick({
/* lazyLoad: 'ondemand', */
/* centerMode: true, */
dots: true,
/* infinite: true, */
speed: 500,
fade: true,
adaptiveHeight: true,
focusOnSelect: true,
cssEase: 'linear',
/* initialSlide: 1, */
setPosition: 1,
/* slickGoTo: 8, */
initialSlide: menuid
});
});
</script>
I've got a bootstrap accordion panel, and the panels aren't collapsing like they should when I click on them if they're already open. I can't figure out why. I had this working with the panels hard coded, but once I set up wp_query to load the panels, everything worked except the panels closing.
the function:
<script>
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -50
}, 500);
}
});
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
and the nested loops to generate the accordion panels:
<div class="home-contents">
<div class="container">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="faqheading"><?php the_title(); ?></h1>
<!-- <div class="col-sm-9" style="float: none; margin: auto;"><?php the_content(); ?></div> -->
<?php endwhile; ?>
<div class="clear"></div>
</div> <!-- row -->
</div> <!-- container -->
<div class="blog-page">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<div class="container">
<div class="panel-group" id="accordion">
<?php
/*
* Loop through Categories and Display Posts within
*/
$post_type = 'faq';
// Get all the taxonomies for this post type
$taxonomies = get_object_taxonomies( array( 'post_type' => $post_type ) ); /* gets taxonomy from posts */
foreach( $taxonomies as $taxonomy ) :
// Gets every "category" (term) in this taxonomy to get the respective posts
$terms = get_terms( $taxonomy );
foreach( $terms as $term ) : ?>
<div class="groupheading col-sm-3"><h5 style=" color: #3fa9f5; font-size: 24px; font-weight: 300;"><?php echo $term->name; ?></h5></div>
<?php
$args = array(
'post_type' => $post_type,
'posts_per_page' => -1, //show all posts
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'field' => 'slug',
'terms' => $term->slug,
'orderby' => 'collapse id',
'order' => 'desc'
)
),
'order' => 'DESC'
);
?>
<?php
$posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="panel panel-default col-sm-9">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo 'collapse'.get_the_id();?>"><?php $value = get_field( "faq_heading"); echo $value; ?></a>
</h4>
</div>
<div id="<?php echo 'collapse'.get_the_id();?>" class="panel-collapse collapse">
<div class="panel-body col-sm-9">
<p><?php $value = get_field( "faq_text", false, false); echo $value; ?></p>
</div>
</div>
</div> <!-- .panel -->
<?php endwhile;?>
<div class="panel panel-default col-sm-9 mobilehide" style="height: 45px;"></div>
<div class="groupheading col-sm-3 mobilehide" style="height: 45px;"></div>
<?php
endif; ?>
<?php endforeach;
endforeach; ?>
</div> <!-- .panel-group -->
</div><!-- end col-sm-12 -->
</div> <!-- end row -->
</div><!-- end container -->
</div><!-- end blog-page -->
</div> <!-- .container -->
Edit: Ok, I've added the following but it's still not working:
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).parentsUntil(".panel-default").find(.children(".panel-collapse")).removeClass("in");
});f
});
</script>
2nd edit: I feel like the issue is that .parent isn't finding the right element, but I'm not sure how to direct it correctly.
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).addClass("collapsed");
$(this).parent().find(".panel-collapse .collapse").removeClass(".panel-collapse .collapse").addClass(".panel-collapse .collapse .in");
$(this).find().parent('.collapse.in').removeClass(".panel-collapse.collapse").addClass(".panel-collapse.collapse.in");;
});
});
</script>
Ok, I've solved this. I had originally built this page as part of a wordpress site, and I had included the bootstrap code at the top of the template. In the process of rebuilding the whole site, I put a new bootstrap include in the header file for the site. I left the old include at the top of my template when I got around to working on this particular page, and this redundancy of code was, somehow, causing the collapse to function incorrectly. I still don't know/understand why this was the case, but I've got it working correctly now.
I realize I didn't actually get any responses to this, but thank you to everyone who at least looked.
I'm trying to achieve a similar carousel as below (live preview):
I've been fiddling around with the settings but no luck so far despite having the same structure and classes. Here's what I have so far:
My code snippet as below:
JS:
$('#lgi__slider .owl-carousel').owlCarousel({
dots: false,
autoWidth: true,
stagePadding: 0,
margin: 15,
nav: true,
navText: ['<i class="icon-left-small"></i>', '<i class="icon-right-small"></i>'],
navContainer: '#lgi__slider',
navClass: [ 'lgi__btn lgi__btn--prev', 'lgi__btn lgi__btn--next' ],
responsive: {
0: {
items: 1,
},
768: {
items: 2,
autoWidth: false,
},
992: {
items: 3,
autoWidth: false,
},
1310: {
items: 3,
autoWidth: false,
margin: 30,
}
}
});
PHP/HTML:
<section class="lgi">
<div class="container">
<div class="lgi__block lgi__block-2">
<div class="lgi__head">
<h2 class="h0">PRODUCTS BY <?php echo $model->title ?></h2>
<p class="lgi__quote"></p>
</div>
<div class ="lgi__slider" id="lgi__slider">
<div class="owl-carousel owl-loaded owl-drag">
<?php foreach ($model->products as $product): ?>
<div class="lgi__item">
<a class="lgi__item-inner main-enterprise-image" data-enterprise-id="<?php echo $product['id']; ?>" data-image="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" data-category="<?php echo $product->productCategory->title;?>" data-desc="<?php echo $product->text_short_description;?>" data-title="<?php echo $product['title']; ?>">
<div class="lgi__block-img">
<img class="lgi__img" src="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" />
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4> <?php echo $product['title']; ?></h4>
<h6>
<?php echo $product->productCategory->title; ?>
</h6>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
Greatly appreciate if anyone can point out what I'm doing wrong.
Bootstrap carousel used to work before but it's no longer working. I can't figure it out what I have done wrong now. I' am loading jQuery on my head and Javascript external files and bootstrap JS in the footer.
I want when the document is loaded / page is loaded the Carousel should auto start. I have tried few options but no luck.
$(function(){
$('.carousel').carousel({
interval: 2000
});
});
$(function(){
$('.carousel').carousel({
interval: 2000
});
$('.carousel-control.right').trigger('click');
});
This is the JavaScript which is loaded in the footer.
$("#homeCarousel .item:first").addClass("active");
$("#homeCarousel .carousel").carousel({interval: 100});
This the HTML
<div id="homeCarousel" class="carousel slide visible-lg">
<div id="CurrentDemandMeter">
<div class="graph"><?php require_once("snippets/home_current_deman_graph.php"); ?></div>
<div class="graphDeails">
<div class="our_current_demand_label">Our current demand</div>
<div class="what_is_this_label"><a class="what_is_this_link" href="#"></a></div>
</div>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$i=0;
$args = array('category_name' => 'homepage-carousel',);
$loop = new WP_Query($args);
while($loop->have_posts()): $loop->the_post();
$link = get_field("learn_more_link", $post->ID);
//$link = $meta_values[0];
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$attachment = wp_get_attachment_url( $attachment->ID, 'full' );
?>
<div class="item">
<div class="fill"><img src="<?php echo $attachment; ?>" class="img-responsive"/></div>
<div class="carousel-caption">
<h1><?php echo substr(the_title($before = '', $after = '...', FALSE), 0, 30); ?></h1>
<div class="excerpt"><?php echo the_excerpt(); ?></div>
</div>
</div>
<?php
}
}
endwhile;
wp_reset_query();
?>
</div>
</div>
I' ve managed to find the Answer for my Question. For some reason "data-ride="carousel" was missing from
<div id="homeCarousel" class="carousel slide visible-lg" data-ride="carousel">
Just a simple mistake...Cheers!