I am trying to get slick slider as an auto scrolling carousel working in a webpage I am building. What I am trying to achieve is this effect, a horizontal line of images that scrolls slowly all the time.
When I run my code, however, the images load in a vertical stack, with no scrolling at all. I have copied the slick folder into the same folder as my index.html. What is it that I am missing here?
I have this in my CSS:
html,
body {
height: 100%
}
.slider {
width: 300px;
margin: 2px auto;
text-align: center;
padding: 10px;
color: white;
.parent-slide {
padding: 15px;
}
img {
display: block;
margin: auto;
}
}
.slider:before,
.slider:after {
content: "";
position: absolute;
z-index: 1;
width: 100px;
top: 0;
height: 100%;
pointer-events: none;
/*makes the linkes behind clickable.*/
}
.slider:before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.slider:after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
and this in my HTML:
<body>
<div class="slider">
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
<div class="slide">
<img src="images/stills/apt.jpg" alt="" class="img-responsive" /> </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 0,
speed: 2200,
arrows: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
cssEase: 'linear'
});
});
</script>
</body>
If I understand your question right, the problem is only that in the example you showed the CSS is written in LESS.
LESS
Less (sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.
— https://en.wikipedia.org/wiki/Less_(stylesheet_language)
The problem in your code is the cascade written code:
.slider{
/* .. */
.parent-slide{padding:15px;}
img{display: block;margin:auto;}
}
This kind of code is not supported by CSS.
Here is the example with normal CSS:
window.onload=function(){
$('.slider').slick({
autoplay:true,
autoplaySpeed: 0,
speed: 2200,
arrows:false,
centerMode:true,
slidesToShow:5,
slidesToScroll:3,
cssEase: 'linear'
});
};
body {
background: #000;
}
.slider {
width: 100%;
margin: 2px auto;
text-align: center;
padding: 10px;
color: white;
}
.slider .parent-slide {
padding: 15px;
}
.slider img {
display: block;
margin: auto;
}
.slider:before,
.slider:after {
content: "";
position: absolute;
z-index: 1;
width: 100px;
top: 0;
height: 100%;
pointer-events: none;
/*makes the links behind clickable.*/
}
.slider:before {
left: 0;
background: linear-gradient(to right, #000000, rgba(0, 0, 0, 0));
}
.slider:after {
right: 0;
background: linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
}
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet prefetch" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slider">
<div class="slide">
<img src="https://loremflickr.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://placekitten.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://placeimg.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://placebear.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://stevensegallery.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://loremflickr.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://placecage.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://placeimg.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://placebear.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://stevensegallery.com/300/300" alt="" class="img-responsive" />
</div>
<div class="slide">
<img src="https://picsum.photos/300/300" alt="" class="img-responsive" />
</div>
</div>
It always helps to look at the real source code with your Web Developer Inspector.
To see how the code has to be implemented into an HTML file see the follow code and paste it into an empty HTML file: https://pastebin.com/uKXzf86g
The problem is with the $(document).ready(function(){ used in the html page. Somehow it is not considering that to utilise the slick properties set.
If you try like below in your html file, it will definitely work!
<script type="text/javascript">
window.onload=function(){
$('.slider').slick({
autoplay:true,
autoplaySpeed: 0,
speed: 2200,
arrows:true,
centerMode:true,
slidesToShow:3,
slidesToScroll:1,
cssEase: 'linear'
});
};
</script>
Related
I have this carousel, and I want to make the pics on the side smaller and side pics to be a bit in the back of the front pic, like in the the photo below.
For it to be like that, shall I give different class to each picture, and modify it in the css file, or is there any other method?
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel-item{
position: absolute;
background-color:green;
}
img {
width: 150px;
position: relative;
border-radius: 10px;
}
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static 'functionality/imageslider.js' %}"></script>
<link rel="stylesheet" type='text/css' href="{% static 'blog/imageslider.css' %}">
<title></title>
</head>
<body>
<div class="carousel">
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="">
</div>
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="" />
</div>
<div class="carousel-item"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt=""/>
</div>
<div class="carousel-item"
><img
src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg"
alt=""/>
</div>
</div>
</body>
</html>
Try by adding perspective: 1000px; to the parent element
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel {
position: relative;
height: 300px;
perspective: 1000px; /* Add perspective */
}
.carousel-item {
position: absolute;
width: 150px;
background-color: green;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}
.carousel img {
width: 100%;
display: block;
position: relative;
}
<div class="carousel">
<div class="carousel-item">
<img src="//placehold.it/250x500/f00/000?text=box+1" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+2" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+3" alt="">
</div>
<div class="carousel-item">
<img src="//placehold.it/250x500/fff/000?text=box+4" alt="">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I am using owlcarousel2, The fade transition between slides is still too quick. When one image changes to the next, it needs to be slower. (I am not referring to how long a single slide is displayed, just the transition speed). Where i have this option
autoplaySpeed: 13000,
autoplayTimeout:5000
If you reduce the autoplay to e.g. 2000, it should play a lot faster (vice versa, if you want it to be slower, increase the autoplayspeed from 13000 to e.g. 20000, but at the moment it's the 5000 that seems to be counted for the transition, so increase that to maybe 8000 - 8secs)
See my fiddle here (it's different but it's owl carousel)
$(document).ready(function () {
$("#owl-demo").owlCarousel({
autoPlay:2000, //Set AutoPlay to 2 seconds
dots: true,
items: 2,
itemsDesktop: [100, 3],
itemsDesktopSmall: [200, 3]
});
});
#owl-demo .item {
margin: 3px;
}
#owl-demo .item img {
display: block;
width: 25%;
height: auto;
}
.owl-theme .owl-controls .owl-page {
display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" />
<div id="owl-demo">
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
<div class="item">
<img src="http://placehold.it/50x50" alt="Owl Image" />
</div>
</div>
(snippet somehow doesn't work, but fiddle works, correct the snippet if you spot the error, thx)
I'm trying to use Masonry, but it doesn't seem to work well. It leaves a lot of empty spaces. as you can see here
I already tried various other ways to implement Masonry, but this one leans the most to the result. Can someone help this rookie?
Here what I think is important of my HTML/ CSS/ JAVASCRIPT
<script src="masonry-docs/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
// options
columnWidth: 33%,
itemSelector: '.grid-item'
});</script>
.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}
*{box-sizing:border-box;}
.box-sizing:border-box;
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
width: 33%;
float: left;
border: 5px solid #FFFFFF;
}
.grid-sizer,
.grid-item {
width: 33%;
}
<section id="werk">
<div class="container">
<div class="grid">
<div class="item">
<div id="masonry-grid">
<div class="grid-item">
<h3>Manifesta 10</h3>
<span class="category">huisstijl</span>
<img src="images/manifesta.jpg" alt="" />
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Deutsche Grammophon</h3>
<span class="category">platenhoezen</span>
<img src="images/GIF_1.gif" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width3">
<h3>Ghent Art Book Fair</h3>
<span class="category">poster</span>
<img src="images/boekposter.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item">
<h3>teaser masterproef</h3>
<span class="category">foto</span>
<img src="images/masterproef.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Mundaneum</h3>
<span class="category">publicatie</span>
<img src="images/Mundaneum.gif" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Your h3 Element has a margin, add this a the beginning of your CSS-Code:
h3 { margin: 0px; }
Your .grid-item has a border of 5px, change it in your CSS-Code:
.grid-item {
width: 33%;
float: left;
border: 0px solid #FFFFFF;
}
I have tried many things to center this slider. This includes align="center" style="margin: 0 auto;" style="margin-right: 0 auto; margin-left: 0 auto;". All of these I have tried on the images and slider div too. I am not sure what what the problem is and any help would be very much appreciated. This is my first time posting so sorry if this is not the correct format. Below is the code I am having trouble with
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
#slideshow {
margin: 0px auto;
position: relative;
max-width: 1200px;
height: 720px;
<!-- padding: 10px;
--> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.ppt img {
margin-left: -50%;
}
.ppt li {
left: 50%;
}
#slideshow > div {
position: absolute;
}
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div id="slideshow">
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
</div>
</div>
Your slideshow is centered. It's the images themselves that aren't centered. You can see evidence of this in this jsfiddle. Centering the images would have more to do with your absolute positioning. You can use left: 50%; transform: translate(-50%, 0); to center the images if that is the goal.
Firstly, bunch of bad practices:
Too many inline
Don't need divs inside the slider. Try a list. Better
code management.
Now to the problem. You can simply use
margin: auto;
for the #slideshow to horizontally centre it.
I need to design gallery in similar to example below with responsive feature.
so far i managed to find few galleries but each one had one or the other limitation. Gallery i am working on is based on jssor example http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html
I am able to make some modification to the code and make it similar to my requirement, Unfortunately same code which is working on my local system is not working on JSFiddle.
At present i tried to add the caption to the jssor gallery but it is not working, while my actual requirement is for two separate caption one will show the title of the image & other will be link to a website or web page...
I would appreciate help in this regarding or a gallery which is similar to my requirement I have spend two days trying to get my hands on good code which can be easy to customize to my design.
Code sample:
<div style="width:1000px; background-color:green; margin-top:30px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left:0; top: 0px; width: 550px; height: 480px; overflow: hidden;">
<div>
<img u="image" src="http://www.jssor.com/img/travel/01.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-01.jpg" /> <span> Title</span>
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/02.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-02.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/03.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-03.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/04.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-04.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/05.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-05.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/06.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-06.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/07.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-07.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/08.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-08.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/09.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-09.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/10.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-10.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/11.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-11.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/12.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-12.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/13.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-13.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/14.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-14.jpg" />
</div>
</div>
<!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 140px; left: 10px;">
</span>
<!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 140px; left: 490px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin 02 Begin -->
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 430px; height: 480px; right:0px; bottom: 0px; margin-left:2px;">
<div u="slides" style="cursor: move;" class="thumbnail-custom">
<div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
<div class=w>
<thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate>
</div>
<div class=c></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
</div>
<!-- Jssor Slider End -->
</div>
Please remove the unwanted '/' at line 42 of scripts.
And make following changes,
Add css for captions
/* caption css */
.captionOrange, .captionBlack
{
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange
{
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack
{
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited
{
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover
{
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
Add caption options
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
Add captions to slide
<div u=caption t="L" du="2000" class="captionOrange" style="position:absolute; left:20px; top: 300px; width:500px; height:30px;"> Caption 1 </div>
<a u="caption" t="R" class="captionOrange" href="http://www.yourdomain.com" style="position: absolute; top: 300px; left: 630px; width: 250px; height: 30px;">www.yourdomain.com</a>
See http://jsfiddle.net/77uuamcn/4/