<div class="block-slider">
<div class="block-slider__container">
<div class="block-slider__product">
<img src="../src/img/default/2020fd612ddda7c2361f6007fd6d440a.png" alt="product" class="block-slider__product-img">
<div class="block-slider__product-title">JW Anderson</div>
<p class="block-slider__product-description">NET-A-PORTER</p>
<span class="block-slider__product-price">125 Aed</span>
</div>
<div class="block-slider__product">
<img src="../src/img/default/4359b6e39805e069b9341402d1a7522a.png" alt="product" class="block-slider__product-img">
<div class="block-slider__product-title">JW Anderson</div>
<p class="block-slider__product-description">NET-A-PORTER</p>
<span class="block-slider__product-price">125 Aed</span>
</div>
<div class="block-slider__product">
<img src="../src/img/default/b2cb268963c1dbdaf6084064c701c0a1.png" alt="product" class="block-slider__product-img">
<div class="block-slider__product-title">JW Anderson</div>
<p class="block-slider__product-description">NET-A-PORTER</p>
<span class="block-slider__product-price">125 Aed</span>
</div>
<div class="block-slider__product">
<img src="../src/img/default/7904c14107cbfbac819e4ed58d48c7ff.png" alt="product" class="block-slider__product-img">
<div class="block-slider__product-title">JW Anderson</div>
<p class="block-slider__product-description">NET-A-PORTER</p>
<span class="block-slider__product-price">125 Aed</span>
</div>
</div>
</div>import './styles/style.sass';
import * as $ from 'jquery';
import './slick';
$('.block-slider__container').slick({
dots: true,
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
}
}
]
});.block-slider
max-width: 1600px
height: 550px
display: block
margin: 0 auto
margin-top: 80px
background-image: url('../img/default/Rectangle2144.png')
padding: 50px
&__container
margin: 0 auto
width: 1000px
display: flex
justify-content: space-between
<div class="wrapper">
<input type="radio" name="point" id="slide1" checked>
<input type="radio" name="point" id="slide2">
<input type="radio" name="point" id="slide3">
<input type="radio" name="point" id="slide4">
<input type="radio" name="point" id="slide5">
<div class="slider">
<div class="slides slide1"><img src="/src/img/MyCollages (1).jpg" alt=""></div>
<div class="slides slide2"><img src="img/MyCollages (2).jpg" alt=""></div>
<div class="slides slide3"><img src="/src/img/MyCollages (4).jpg" alt=""></div>
<div class="slides slide4"><img src="/src/img/единомышленники.jpg" alt=""></div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>.wrapper
height: 685px
margin: 00px auto 0
position: relative
width: 920px
margin-bottom: 40px
.controls
left: 50%
margin-left: -108px
position: absolute
label
cursor: pointer
display: inline-block
height: 16px
margin: 25px 12px 0 16px
position: relative
width: 16px
-webkit-border-radius: 50%
-moz-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
-webkit-transition: background ease-in-out .5s
-moz-transition: background ease-in-out .5s
-o-transition: background ease-in-out .5s
transition: background ease-in-out .5s
&:after
border: 4px solid #fdfdfd
content: " "
display: block
height: 12px
left: -4px
position: absolute
top: -4px
width: 12px
-webkit-border-radius: 50%
-moz-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
&:hover,
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4)
background: #ffffff
.slider
border-radius: 150px
background-color: #fafafa
height: inherit
overflow: hidden
position: relative
width: inherit
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5)
box-shadow: 0 0 20px rgba(0, 0, 0, .5)
.wrapper > input
display: none
.slides
height: inherit
position: absolute
width: inherit
.slides
height: inherit
opacity: 0
position: absolute
width: inherit
z-index: 0
-webkit-transform: scale(1.5)
-moz-transform: scale(1.5)
-o-transform: scale(1.5)
transform: scale(1.5)
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s
transition: transform ease-in-out .5s, opacity ease-in-out .5s
#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5
opacity: 1
z-index: 1
-webkit-transform: scale(1)
-moz-transform: scale(1)
-o-transform: scale(1)
transform: scale(1)