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>
Related
I'm trying to recreate the SwiperJS slider from this image, they also used SwiperJS to create this
My current situation can see in the image below, I have a problem with the next and previous buttons that are overlapping slider images, what is a solution for this, how can I shrink this container a little bit so my buttons are visible as the image above
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-slide img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
margin: auto;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
I found the solution to the problem was positioning of .swiper-container and .page-row here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
position: relative;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-content__wrapper-img-desktop,
.swiper-content__wrapper-img-mobile {
position: relative;
width: 100%;
height: 100%;
}
.swiper-content__wrapper-img-desktop img,
.swiper-content__wrapper-img-mobile img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.page-row .swiper-container {
position: unset;
margin: 0 45px;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
When the user clicks on one of playing cards in this memory game, it fires off a flipCard function that transforms the card along the Y axis by 180deg, essentially showing the rotating the image that is hidden on the back and making it visible in the front. My eventListener and the flipCard function is working but there's a problem with the CSS because the back image won't appear. Despite it only supposed to rotate 180deg, the image on the front rotates and still appears on the front after flipCard is invoked. Can someone take a look at my CSS and suggest how to make the back image appear?
const cards = document.querySelectorAll('.card');
function flipCard(){
this.classList.toggle('flip');
}
cards.forEach(card => card.addEventListener('click', flipCard));
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body{
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1{
color: black
}
h1:hover{
color:blue;
}
.card{
display: inline-block;
position: relative;
transform: scale(1);
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card.flip {
transform: rotateY(-180deg);
}
.card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
background-color: black;
transform: rotateY(180deg);
}
/*
.card .card-back,
.card .card-front{
transition: transform 300ms ease-in;
}
.card-front, .card-back{
position: absolute;
justify-content: center;
align-items: center;
display: flex;
backface-visibility: hidden;
}
*/
.overlay{
font-size: 20px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<h1>Memory Game</h1>
<section class="gameboard">
<div class="row">
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
</div>
<div class="row">
<div class="card" id = "monster6" >
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster8">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id = "monster1">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id = "monster3">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id = "monster5">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id = "monster4">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id = "monster6">
<img class="card-front" img src="logo.png" height="120px" width="120px">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
<div class="overlay">
<h1>Great job! 🥳 </h1>
</div>
<script src="index.js"></script>
</body>
</html>
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>
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I am trying to include NivoSlider into a div with id imageslider into my page. I have tried following the tutorial on their website, but with no effect for four days now. Please check it out :
index.php
<!-- In the head section I have included these -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Somewhere in the body section -->
<div id="imageslider">
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="abc.jpeg" alt="" height="360" width="700"/>
<img src="uvw.jpeg" alt="" height="360" width="700"/>
<img src="pqr.jpeg" alt="" height="360" width="700"/>
<img src="xyz.jpeg" alt="" height="360" width="700"/>
</div>
</div>
</div>
<!-- Also at the end of the body tag-->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
In my style sheet, style.css
#imageslider {
float: right;
width: 700px;
background-color: blue;
height: 360px;
margin-left: 5px;
margin-right: 15px;
}
/*Rest styles are copied from the website itself*/
.nivoSlider {
position:relative;
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
When I open or refresh the page, no image appears in the imageslider div. Please help me out here !!
Ensure that you load jQuery before loading Nivo Slider:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>