javascripthtmlcssimageslideshow
HTML/CSS - Multiple images in carousel slide show
I'm trying to create a slideshow that shows 4 images at a time, and then you can click arrows on the left and right to go to the next set of images. When I attempt to open my html file in google chrome, all the images stack on top of each other vertically instead of horizontally and my arrows don't show up. I'm not sure why this is. I tried looking up and testing other examples of sliders but they all do the same thing where the images stack up on top of each other vertically and none of the arrows show up.
My page has a background image and also must have a size of 1920px 1100px. I'm not sure if this is what might be affecting it. I would appreciate some help in getting this to work.
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 1920px 1100px;
margin: 0;
overflow: visible;
}
img {
z-index: 15;
width: 100%;
height: auto;
padding: 5px;
}
.slick-dots {
z-index: 15;
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display:inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color:black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color:#999;
border:none;
width: 15px;
height: 15px;
border-radius:50%;
}
:hover{
background-color: black;
}
}
}
/* Custom Arrow */
.prev{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
.next{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
@media screen and (max-width: 800px) {
.next {
display: none !important;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homepage.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>I want the slideshow to look something like:
Solution
Your code is fint,just missing some bootstrap & js cdn in the code,also your css design in scss format i change to in css format the it works fine. Note: Because of code snippest maybe it not support scss format thats why your output not show properly
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
}); @import url(https://fonts.googleapis.com/css?family=Open+Sans);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 1920px 1100px;
margin: 0;
overflow: visible;
}
img {
z-index: 15;
width: 100%;
height: auto;
padding: 5px;
}
.slick-dots {
z-index: 15;
text-align: center;
margin: 0 0 10px 0;
padding: 0;
}
.slick-dots li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
}
.slick-dots li.slick-active button {
background-color: black;
}
.slick-dots li button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
.slick-dots li :hover {
background-color: black;
}
/* Custom Arrow */
.prev {
z-index: 15;
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
}
.prev :hover {
cursor: pointer;
color: black;
}
.next {
z-index: 15;
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
}
.next :hover {
cursor: pointer;
color: black;
}
@media screen and (max-width: 800px) {
.next {
display: none !important;
}
}<!-- Slick Slider -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homepage.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices