Ive tried as much as I could on creating an owl carousel for a fashion website, I want a similar one that gucci.com has. Image below. I have updated my website and code and looks like this now: ghostparis.com[looks like this now: ghostparis.com] . Okay so progress so far the images are now loading and in a carousel, not playing automatically sadly and critically loading vertically and not horizontally, like if you visit the website in mobile device you will see that the image loads downwards and not sideways like the next image. I dont know how to fix it :( 1
I have tried creating this in code (HTML)
<div class="site-blocks-cover" data-aos="fade">
<div class="backgroundHome">
<div class="slider_area">
<div class="slider_active owl-carousel owl-theme">
<div class="homeslider">
<div class="item">
<div class="image1">
<img src="images/Ghost1.jpg" alt="">
</div>
<div class="image2">
<img src="images/Ghost2.jpg" alt="">
</div>
<div class="image3">
<img src="images/Ghost3.jpg" alt="">
</div>
</div>
</div>
css here:
.backgroundHome{
width: 100%;
height: 100%;
}
.item img{
display: block;
width: 100%;
height: auto;
}
background color red is just for development purposes as its just overriden by image on slider
and javascript I think here is pretty much where my mistake is as its my first time actually creating a slider:
var slider1 = function(){
$('.slider_active').owlCarousel({
loop:true,
margin:0,
items:1,
autoplay:true,
navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
nav:true,
dots:true,
autoplayHoverPause: true,
autoplaySpeed: 800,
responsive:{
0:{
items:1,
dots:false,
},
767:{
items:1,
dots:false,
},
992:{
items:1,
dots:true,
}
}
})
};
slider1();
Help with be really much appreciated.
Related
I'm wondering how to create a slider with images, so that previous and next ones are visible on the left/right edges, while active one is always centered.
I can show previous or next slides using margin-left/margin-right with negative values, but when I scroll to the next one, it won't be centered because of this margin.
Should I apply and remove negative margins with js script? How to do so?
I show my idea with two simple screenshots that show what happens scrolling to the right, from 1st slide to 2nd one:
$('.slider').slick({
dots: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
centerMode: true,
dots: false,
focusOnSelect: true,
});
$('.slider').slick('slickGoTo', 1);
.slider {
max-width: 450px;
}
.slider .slick-slide {
padding: 20px;
outline: none;
}
.slider .slick-slide .inner {
border: 2px solid #000;
min-height: 550px;
padding: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<div class="slider">
<div>
<div class="inner">
SLIDE 1
</div>
</div>
<div>
<div class="inner">
SLIDE 2
</div>
</div>
<div>
<div class="inner">
SLIDE 3
</div>
</div>
</div>
First hide the horizontal overflow on the parent container.
Then I guess you could do something like this
<div class="container-item" style="--i: 0"></div>
<div class="container-item" style="--i: 1"></div>
<div class="container-item" style="--i: 2"></div>
.container-item{
--active: 0
transform: translateX(calc((var(--i) - var(--active))* width ))
}
//width refers to the width of the current element which has to be set by you or you may use javascript to find that
and use Javascript to change the value of --active when the carousel arrows are clicked.
The syntax that I used within the calc function might not be valid so you'll have to tweak that around a bit.
I want the slider to be selected automatically after the loading of page. Meaning that I want to be able to navigate through the slider using the arrow keys right after the page load, without clicking on it first.
This is the workign slider but I have to click on it first before the arrow keys work.
https://codepen.io/jinzagon/pen/YzqpdLj
HTML
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
CSS
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
JS
$(".top_slider").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});
1. Put focus on the slider after it is loaded
After the slider is initialised, you can put focus on the slider so that the keyboard can be used without tabbing to it or clicking on it first... but note that you can only set focus on an element that can get focus e.g. an a, button or input. You're first slide contains a link so we can use it.
In Slick 1.3.9 or below (which you are using), you can use the onInit callback and select the link in the first div of the .slide-track like this:
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
In Slick 1.4.0 and above, you use the callback event before you initialise the slider, and you can select the first slide more easily using the .slick-current class (note, you still need to select a focus-able element in the slide):
/* Bind the event BEFORE initialising slick */
$('.top_slider').on('init', function(event, slick){
$(".top_slider .slick-current a").focus();
});
/* Now you can initialise Slick */
$(".top_slider").slick({
/*Settings....*/
});
2. Automatically scroll to the slider when the page loads
You just need the following line to make your page to scroll down to the slider when the page loads:
$( document ).ready(function() {
$("html, body").animate({ scrollTop: $('.top_slider').offset().top}, 500);
});
We get the position of the top of the slider using the .top_slider class and set scrollTop to this value in the animate function - this will animate the scroll to that location.
Working Snippet Putting this all together:
$('.top_slider').on('init', function(event, slick) {
$(".top_slider .slick-current a").focus();
});
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
$('html,body').animate({ scrollTop: $('.top_slider' ).offset().top}, 500);
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<h1>HEADER HERE...</h1>
<h2>Some more content to scroll past...</h2>
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
I'm building a website that utilizes ken wheeler's slick slider to display images. The idea is to have one large image on the top slider then have a few smaller images on the bottom slider that reflect the image on top. However when I navigate from one slide to another the top and bottom slider images overlap. So far this issue occurs on chrome, firefox, and safari.
Expected (link to image):
https://i.imgur.com/b20qHsi.png
Actual:
https://i.imgur.com/ZstQjns.png
See it for yourself here:
https://treasuredtransportation.com/inventory/porsche1964.html
JSFiddle:
http://jsfiddle.net/3e7fzuxL/5/
Sorry I know the JS Fiddle looks very messy although it seems to be replicating my issue nonetheless. The issue occurs for me in the JSFiddle after navigating with the dots to slide 5 and 6.
I've already tried using display:block; on the slider's img tags however that did not fix the problem. Here's my javascript , css, and html code to control the slider. Note that I am using Slick's adaptiveHeight, slider syncing, lazyload, and fade features.
Javascript
$('.slider-for').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav',
adaptiveHeight: true, //Removing adaptie
nextArrow: '<i class="fa fa-chevron-right nav-button-right"></i>',
prevArrow: '<i class="fa fa-chevron-left nav-button-left"></i>',
infinite: true,
});
$('.slider-nav').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
infinite: true,
focusOnSelect: true,
});
CSS
/*Control Image Size On Car Pages For Desktop */
/*See Image Control media query for mobile*/
.car-image-size{
padding:25%;
}
/* Prevent Bottom Slides from Overlapping top ones */
.car-image-size img{
display:block;
}
.slider-nav img{
display:block;
}
/* Slick car Slider margin adjustment for screen size
see media query */
.adapt-to-screen{
margin-top: -15%;
margin-bottom: -15%;
}
HTML
Top Carousel (Single Large Image, the first "car-image-size" div is repeated for each image, after the first image they lazy load)
<!--Slick Carousel-->
<div class="slider-for adapt-to-screen">
<!--Images in Top carousel -->
<div class="car-image-size">
<div class="numbertext">1 / 24</div>
<img src="./carimages/porsche-1964/porsche-one.jpg" style="width:100%;">
<h3 class="text is-overlay is-family-sans-serif has-text-weight-bold"></h3>
</div>
<div class="car-image-size">
<div class="numbertext">2 / 24</div>
<img data-lazy="./carimages/porsche-1964/porsche-two.jpg" style="width:100%;">
<div class="text is-overlay is-family-sans-serif has-text-weight-bold"></div>
</div>
Bottom Carousel
<div class="slider-nav">
<div style="padding:10px;">
<p> <img src="./carimages/porsche-1964/porsche-one.jpg"> </p>
</div>
<div style="padding:10px">
<p> <img data-lazy="./carimages/porsche-1964/porsche-two.jpg"></p>
</div>
It repeats for each image with lazy load like the top carousel.
I can remove the adaptiveheight setting from the javascript and thats a quick fix but then my site looks ugly. Any ideas on how I can fix this?
Please check this in full view, i use lazyload to progressive.
//My Sliders
$('.slider-for').slick({
lazyLoad: 'progressive',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav',
adaptiveHeight: true,
infinite: true,
});
$('.slider-nav').slick({
lazyLoad: 'ondemand',
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
infinite: true,
focusOnSelect: true,
});
.slick-slide-small {
background: #3a8999;
color: white;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-slide {
background: #3a8999;
color: white;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
/* my padding padding: 25%; */
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
/* My CSS */
/* Control Image Size On Car Pages For Desktop */
/* See Image Control media query for mobile */
.car-image-size{margin-bottom:10px;}
.car-image-size img {
width:110px; margin:0 auto; display:block
}
/* Slick car Slider margin adjustment for screen size
see media query */
.adapt-to-screen {
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="slider-for adapt-to-screen">
<!--Images in Top carousel -->
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div class="car-image-size slick-slide">
<img data-lazy="https://via.placeholder.com/150" />
</div>
</div>
<!--Bottom Carousel-->
<div class="slider-nav">
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
<div>
<img data-lazy="https://via.placeholder.com/150" />
</div>
</div>
I'm starting in development, more precisely in .net, and I speak a bit of english. I'll do the best I can.
I have a problem with jQuery function carouFredSel(), specifically with the width of a responsive carousel when the window is maximized: in Firefox it works perfectly, but in Chrome and IE (in other explorers I have not tried it yet) the width of the carousel at the right of the screen is exceeded.
The HTML is:
<div id="cuerpo-img">
<div id="carousel">
<div>
<img src="[image path]" />
</div>
<div>
<img src="[image path]" />
</div>
<div>
<img src="[image path]" />
</div>
</div>
....
</div>
The Javascript code is:
$(function () {
$('#carousel').carouFredSel({
responsive: true,
items: {
visible: 1
},
scroll: {
duration: 400,
timeoutDuration: 4500,
fx: 'uncover-fade'
},
pagination: '#pager'
});
});
And the CSS code is:
#carousel div
{
height:275px;
float: left;
z-index:0;
}
#carousel img
{
min-width: 100%;
min-height: 100%;
z-index:0;
}
Any solution for this?
Just wondering if anyone can assist me with the following issue. I'm using nivo-slider on my HOME page to rotate 3 (large) images; hwoever, when a visitor visits the page for the first time all 3 images can been seen for a good 5 seconds before they all load into the slider.
This is the script that I'm using on the site:
<script type="text/javascript">
$(window).load(function() {
$('#nivo-slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:5000,
startSlide:0,
directionNav:true,
directionNavHide: false,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}
});
});
</script>
And I then have the following HTML for loading the images:
<div id="slideshow">
<div class="slide slide-wide bg1">
<div class="containit ornament-left">
<div class="image">
<div class="thumb">
<div id="nivo-slider">
<img src="/images/slider/slide1.jpg" alt="" title="" />
<img src="/images/slider/slide2.jpg" alt="" title="" />
<img src="/images/slider/slide3.jpg" alt="" title=""/>
</div>
</div>
</div>
</div>
</div>
</div>
Does anyone know how to improve image load speed with this script and if so can you help me with it please. Thanks
Add display: none to #slider img. That will hide all the images until NivoSlider displays them properly.
Sorry, my first answer was entirely wrong, try:
#slider {
position:relative;
width: 800px; //your image width
height: 583px; //your image height
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
You can check my implementation here:
http://www.duopixel.com/portafolio/