I need a feature to finish my slider image. I've used Slick.js to build my slider and a little HTML and CSS to be displayed inside a modal that is fired up when the user clicks in an static image. Well, I need the first slide shown in the slider to be the one just clicked by the user. I think this is a very common feature in sliders of the world. But I haven't found the way of doing it after a lot of searching. I'm asking because maybe someone has used Slick before and he has had the same situation. I guess the setting I have to play with is initialSlide, but no idea how to store the reference of the image at the same time slider is initialized. I'm aware is a tricky problem but I'm asking just in case.Thank you in advanced
This is how I initialize the slider
<script>
$(document).ready(function(){
$('.slider-gallery').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1
});
$(".slick-prev").hide();
$(".slick-next").hide();
});
$('#prev').click(function(){
$(".slider-gallery").slick('slickNext');
});
$('#next').click(function(){
$(".slider-gallery").slick('slickPrev');
});
</script>
This is the html of the static gallery image
<div class="large-6 medium-6 small-12 columns">
<div class="main-img"><a href="#openGallery">
<img src="assets/images/2.png" alt=""></a>
</div>
<div class="thumbnails">
<img class="large-4 medium-4 small-4 columns" src="assets/images/1.png" alt="">
<img class="large-4 medium-4 small-4 columns" src="assets/images/2.png" alt="">
<div class="thumbnail-hover"><a href="#openGallery">
<div class="hover-gallery">23fotos</div>
<img class="large-4 medium-4 small-4 columns" src="assets/images/3.png" alt=""></a>
</div>
</div>
And this the html of the slider
<div id="openGallery" class="item-gallery">
<div class="row">
X
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
</div>
<div class="large-10 medium-10 columns">
<div class="slider-gallery">
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/1.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/2.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/3.png">
</div>
</div>
</div>
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
</div>
</div>
</div>
One way to do so is to use the slickGoTo() function attached to each click on image.
<img class="small-4 columns" src="assets/images/1.png" alt="" onclick="$('.slider-gallery').slickGoTo(0)">
<img class="small-4 columns" src="assets/images/2.png" alt="" onclick="$('.slider-gallery').slickGoTo(1)">
Notes:
The first slide is 0, the second is 1 and so...
You are using Foundation which is awesome. You don't need to add medium-4 and large-4 as you did when you have small-4. The Foundation rule is that "small" = small and larger.
If this is not working try the following syntax instaed:
onclick="$('.slider-gallery').slick('slickGoTo', 0);"
This depends on the slick version you're using.
Related
Can anyone help me in achieving the following carousel (train carousel) effect using grid and cards in MaterializeCSS. I have tried many solutions, but I'm unable to achieve desired results.
Here is what I have achieved so far: https://jsfiddle.net/c5mq2ezo/1/ (sorry for the images inside the link)
But the problem is I need to create train carousel effect with any number of grids/cards available. Right now it gives unexpected results in visible slide. If I add 4 or 5 cards, it only displays 3 instead of 4. If I add 7 or 8 cards then it displays 4 cards as it should.
Following is the code:
<body class="grey darken-3">
<section>
<div class="carousel carousel-slider">
<a class="carousel-item black-text" href="#one">
<div class="card">
<div class="card-image">
<img src="images/samples/insurance.png">
</div>
<div class="card-content">
<h6>Insurance</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#two">
<div class="card">
<div class="card-image">
<img src="images/samples/manufucturing.png">
</div>
<div class="card-content">
<h6>Manufucturing defects</h6>
<p>Production lines are often equipped with cameras, but it can be challenging to infer quality or safety problems...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Retail</h6>
<p>Recommend products that match your customers' style, analyze reviews or survey data for topics and trends</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Content filtering</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent future ...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Card 5</h6>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</a>
</div>
</section>
</body>
CSS:
.carousel .carousel-item {
width: 340px !important;
padding: 20px;
}
.card{
border-radius: 8px;
position: relative !important;
right: 20px !important;
}
Actually you can add the cards to the carousel adding the class carousel-item to the card and not using the a tag:
<div class="carousel ">
<div class="card carousel-item">
<div class="card-content">
<span class="card-title">Card 1</span>
Card 1 content
</div>
</div>
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
View in browser
The issue is when you add the picture because the pic uses all the space and the content is displayed below the carousel, maybe with some styles it could be fixed, I don't know too much about CSS.
Hope this be helpful.
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
I have two owl carousel. And one is over the other. One is image with some content and other is only content. And the both slider needs to change together.
This the code below for content slider
<div id="owkey-content-slider" class="owl-carousel">
<div class="item">
<div class="slider-content">
<h4>WE CREATE</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE BUILD</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE OFFER</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE DELIVER</h4>
</div>
</div>
</div>
This is the codes for image slider
<div class="header-bg-image-slide">
<div id="owkey-bg-slider" class="owl-carousel">
<div class="item">
<img src="img/owkey-slider-2.jpg">
<div class="number-item">01</div>
</div>
<div class="item">
<img src="img/owkey-slider.jpg">
<div class="number-item">02</div>
</div>
<div class="item">
<img src="img/shutterstock_327808505.jpg">
<div class="number-item">03</div>
</div>
<div class="item">
<img src="img/owkey-head.png">
<div class="number-item">04</div>
</div>
</div>
And they are initialized in the same conditions/parameters. They are changing together. But, when button was clicked those buttons are for the image slider and that doesn't change the other slider's contents certainly.
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owkey-bg-slider, #owkey-content-slider");
owl.owlCarousel({
navigation : true,
navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
singleItem : true,
transitionStyle : "fade",
autoPlay: true,
touchDrag: false,
mouseDrag: false
});
})
</script>
And I think experienced owl carousel user can help me in this.
There are solution for this problem in here that is for any other kind of slider but not for owl carousel.
Use Flickity Slider, it's a much better slider plugin.
In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps
It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.
I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.
Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});
Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.
Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.