БЛОГ НА HUSL


Как отредактировать правильно слайдер?

Автор вопроса: Илья

Подскажите пожалуйста, как отредактировать слайдер:

  1. Чтобы при наведении на изображение её цвет становился зелёным.
  2. Как сделать кнопки для переключения слайдов? (как в верхнем углу)
  3. Как изменить ширину самого ползунка? (width не подходит).

Должно быть как на фото: введите сюда описание изображения Вот мой код:

HTML:

<section>
    <h1 class="Zagolovok">Наши услуги</h1>

    <div class="slider__items">
      <div class="slider__item slider__item_1">
        <img class="slider_1" src="img/Yslygi_1.png">
      </div>
      <div class="slider__item">
        <img src="img/Yslygi_2_1.png">
      </div>
      <div class="slider__item">
        <img src="img/Yslygi_3.png">
      </div>
      <div class="slider__item">
        <img height="500px" width="418px" src="img/Yslygi_4_2.png">
      </div>


    </div>

CSS:



.slider__item{
  width: 418px;
  height: 500px;
  gap: 0px;
  border-radius: 10px;
  opacity: 0px;

}

.slider__item_1{
  max-height: 500px;
  max-width: 418px;
  border-radius: 10px;
}

.slider__1:hover{
  background-color: #2bee4b;
}

.slider__items {
  overflow-x: scroll;
  overflow-y: hidden;

  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 0 30px;

  padding: 30px 45px;
  padding-right: 0; 

  
}

.slider__items::-webkit-scrollbar {
  /* max-width: 1372px; */
  min-width: 100%;
  /* width: 100%; */
  height: 3px;
  margin-left: 30px;
  margin-right: 30px;
}

.slider__items::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  margin-left: 45px;
  margin-right: 45px;
  width: 100%;
}

.slider__items::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #121613;
  outline: 2px solid #dfe5e0;
  

}


.Zagolovok{
font-family: Montserrat;
font-size: 48px;
font-weight: 700;
line-height: 57.6px;
text-align: left;
margin-left: 45px;
margin-top: 20px;

}

Может быть вы дадите советы как лучше это сделать? Заранее спасибо. Вот мой результат: введите сюда описание изображения


Источник

Ответы (2 шт):

Автор решения: De.Minov

У вас не слайдер, а просто блок со скроллом.
К слову, сам скролл плохо кастомизируется.

Под слайдером, обычно, подразумевается вот такого "элементы":

var swiper = new Swiper(".mySwiper", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

html,
body {
  position: relative;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 300px;
  height: 200px;
}

.swiper-slide {
  height: auto;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Это слайдер Swiper - один из популярных слайдеров, с очень большим функционалом.

Множественные вопросы - не есть хорошо, но отвечу:

Чтобы при наведении на изображение её цвет становился зелёным.

Судя по примеру, там помимо цвета отображается ещё и иконка.
Я бы добавил отдельно блок, куда бы поместил SVG иконку по центру.
Сам блок имеет полупрозрачный фон зелёного цвета (и скорее всего ещё mix-blend-mode свойство). Изначально блок скрыт через opacity: 0;, при наведение на слайд меняем на opacity: 1.
Делается это при помощи конструкции .parent:hover .children.

Как сделать кнопки для переключения слайдов? (как в верхнем углу)

Если реализовывать слайдер при помощи Swiper, то создав кнопки отдельно, их можно назначить на управление слайдером, тут есть два варианта:

  1. При инициализации new Swiper передать в параметрах переназначение дефолтных стрелок "назад\вперёд" - документация.
    Выглядеть это будет так:

     new Swiper('.mySwiper', {
   // ... остальные настройки
   navigation: {
     nextEl: '.custom-button-next',
     prevEl: '.custom-button-prev'
   }
 })

  2. Использовать метод для перелистывания слайда.

     const mySwiper = new Swiper('.mySwiper', {
   // ... остальные настройки
 });

 customButtonPrev.onClick = mySwiper.slidePrev();
 customButtonNext.onClick = mySwiper.slideNext();

Как изменить ширину самого ползунка? (width не подходит).

У Swiper есть модуль Scrollbar, подключаете его в опциях при инициализации и настраиваете по документации

Вот пример того, что можно сделать.

const servicesSliderEl = document.querySelector('.services-slider');
const servicesSliderPrevEl = document.querySelector('.services-navigation-prev');
const servicesSliderNextEl = document.querySelector('.services-navigation-next');

const servicesSlider = new Swiper(servicesSliderEl, {
  slidesPerView: 4,
  spaceBetween: 10,
  navigation: {
    prevEl: servicesSliderPrevEl,
    nextEl: servicesSliderNextEl,
    disabledClass: 'services-navigation-button--disabled',
    navigationDisabledClass: 'services-navigation--disabled'
  },
  scrollbar: {
    el: '.services-scrollbar',
    snapOnRelease: true,
    draggable: true
  }
})
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap';

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  font-family: 'Roboto', sans-serif;
  color: #333;
  overflow: hidden auto;
}

.services {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 600px;
}

.services-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.services-title {
  font-size: 140%;
  font-weight: 700;
}

.services-navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.services-navigation-button {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease;
}

.services-navigation-button svg {
  display: block;
  width: 100%;
  height: 100%;
}

.services-navigation-button:not(.services-navigation-button--disabled) {
  cursor: pointer;
}

.services-navigation-button:not(.services-navigation-button--disabled):hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.services-slider {
  display: block;
  width: 100%;
  margin: 0;
}

.services-slider .swiper-wrapper {
  align-items: stretch;
}

.services-slider .swiper-slide {
  height: auto;
}

.services-slide {
  display: block;
  position: relative;
}

.services-slide-background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 128, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.services-slide-background svg {
  display: block;
  width: 45%;
  height: auto;
  color: rgba(255, 255, 255, 0.5);
}

.services-slide:hover .services-slide-background {
  opacity: 1;
}

.services-slide-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.services-scrollbar {
  --swiper-scrollbar-sides-offset: 0px;
}

.services-scrollbar-wrapper {
  display: block;
  width: 100%;
  position: relative;
}


}
.swiper-slide {
  height: auto;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<div class="services">
  <div class="services-head">
    <div class="services-title">Наши услуги</div>
    <div class="services-navigation">
      <button class="services-navigation-button services-navigation-prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path fill="currentColor" fill-rule="evenodd" d="M11.707 4.293a1 1 0 0 1 0 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/>
        </svg>
      </button>
      <button class="services-navigation-button services-navigation-next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path fill="currentColor" fill-rule="evenodd" d="M12.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-5.293-5.293a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/>
        </svg>
      </button>
    </div>
  </div>
  <div class="services-slider swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide services-slide">
        <div class="services-slide-background">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="128" height="128" viewBox="0 0 512 512">
            <path fill="currentColor" d="m265.203 361.884-35.157-35.157-21.579 21.579 13.577 13.578h-90.022l33.047-57.239-61.15 16.385-19.573-73.048L0 394.074l38.134 66.05h183.91l-13.577 13.579 21.579 21.578 35.156-35.157h.001l49.119-49.12z"/>
            <path fill="currentColor" d="m417.283 230.019 24.499 6.565 7.898-29.478-53.976-14.462v-.001l-61.149-16.384-22.949 85.646-7.899 29.478 29.478 7.899 3.375-12.597 43.417 75.199h-71.616l49.119 49.12-49.12 49.12h165.505L512 394.074z"/>
            <path fill="currentColor" d="M294.135 16.719h-76.27l-90.36 156.51-3.376-12.598-29.478 7.898 7.899 29.478h.001l22.947 85.647 61.15-16.385h.001l53.974-14.462-7.898-29.478-24.497 6.564L256 147.149l37.402 64.782 19.574-73.049 61.149 16.385z"/>
          </svg>
        </div>
        <img class="services-slide-image" src="https://i.imgur.com/dqAdwTT.png" />
      </div>
      <div class="swiper-slide services-slide">
        <div class="services-slide-background">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="128" height="128" viewBox="0 0 512 512">
            <path fill="currentColor" d="m265.203 361.884-35.157-35.157-21.579 21.579 13.577 13.578h-90.022l33.047-57.239-61.15 16.385-19.573-73.048L0 394.074l38.134 66.05h183.91l-13.577 13.579 21.579 21.578 35.156-35.157h.001l49.119-49.12z"/>
            <path fill="currentColor" d="m417.283 230.019 24.499 6.565 7.898-29.478-53.976-14.462v-.001l-61.149-16.384-22.949 85.646-7.899 29.478 29.478 7.899 3.375-12.597 43.417 75.199h-71.616l49.119 49.12-49.12 49.12h165.505L512 394.074z"/>
            <path fill="currentColor" d="M294.135 16.719h-76.27l-90.36 156.51-3.376-12.598-29.478 7.898 7.899 29.478h.001l22.947 85.647 61.15-16.385h.001l53.974-14.462-7.898-29.478-24.497 6.564L256 147.149l37.402 64.782 19.574-73.049 61.149 16.385z"/>
          </svg>
        </div>
        <img class="services-slide-image" src="https://i.imgur.com/dqAdwTT.png" />
      </div>
      <div class="swiper-slide services-slide">
        <div class="services-slide-background">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="128" height="128" viewBox="0 0 512 512">
            <path fill="currentColor" d="m265.203 361.884-35.157-35.157-21.579 21.579 13.577 13.578h-90.022l33.047-57.239-61.15 16.385-19.573-73.048L0 394.074l38.134 66.05h183.91l-13.577 13.579 21.579 21.578 35.156-35.157h.001l49.119-49.12z"/>
            <path fill="currentColor" d="m417.283 230.019 24.499 6.565 7.898-29.478-53.976-14.462v-.001l-61.149-16.384-22.949 85.646-7.899 29.478 29.478 7.899 3.375-12.597 43.417 75.199h-71.616l49.119 49.12-49.12 49.12h165.505L512 394.074z"/>
            <path fill="currentColor" d="M294.135 16.719h-76.27l-90.36 156.51-3.376-12.598-29.478 7.898 7.899 29.478h.001l22.947 85.647 61.15-16.385h.001l53.974-14.462-7.898-29.478-24.497 6.564L256 147.149l37.402 64.782 19.574-73.049 61.149 16.385z"/>
          </svg>
        </div>
        <img class="services-slide-image" src="https://i.imgur.com/dqAdwTT.png" />
      </div>
      <div class="swiper-slide services-slide">
        <div class="services-slide-background">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="128" height="128" viewBox="0 0 512 512">
            <path fill="currentColor" d="m265.203 361.884-35.157-35.157-21.579 21.579 13.577 13.578h-90.022l33.047-57.239-61.15 16.385-19.573-73.048L0 394.074l38.134 66.05h183.91l-13.577 13.579 21.579 21.578 35.156-35.157h.001l49.119-49.12z"/>
            <path fill="currentColor" d="m417.283 230.019 24.499 6.565 7.898-29.478-53.976-14.462v-.001l-61.149-16.384-22.949 85.646-7.899 29.478 29.478 7.899 3.375-12.597 43.417 75.199h-71.616l49.119 49.12-49.12 49.12h165.505L512 394.074z"/>
            <path fill="currentColor" d="M294.135 16.719h-76.27l-90.36 156.51-3.376-12.598-29.478 7.898 7.899 29.478h.001l22.947 85.647 61.15-16.385h.001l53.974-14.462-7.898-29.478-24.497 6.564L256 147.149l37.402 64.782 19.574-73.049 61.149 16.385z"/>
          </svg>
        </div>
        <img class="services-slide-image" src="https://i.imgur.com/dqAdwTT.png" />
      </div>
      <div class="swiper-slide services-slide">
        <div class="services-slide-background">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="128" height="128" viewBox="0 0 512 512">
            <path fill="currentColor" d="m265.203 361.884-35.157-35.157-21.579 21.579 13.577 13.578h-90.022l33.047-57.239-61.15 16.385-19.573-73.048L0 394.074l38.134 66.05h183.91l-13.577 13.579 21.579 21.578 35.156-35.157h.001l49.119-49.12z"/>
            <path fill="currentColor" d="m417.283 230.019 24.499 6.565 7.898-29.478-53.976-14.462v-.001l-61.149-16.384-22.949 85.646-7.899 29.478 29.478 7.899 3.375-12.597 43.417 75.199h-71.616l49.119 49.12-49.12 49.12h165.505L512 394.074z"/>
            <path fill="currentColor" d="M294.135 16.719h-76.27l-90.36 156.51-3.376-12.598-29.478 7.898 7.899 29.478h.001l22.947 85.647 61.15-16.385h.001l53.974-14.462-7.898-29.478-24.497 6.564L256 147.149l37.402 64.782 19.574-73.049 61.149 16.385z"/>
          </svg>
        </div>
        <img class="services-slide-image" src="https://i.imgur.com/dqAdwTT.png" />
      </div>
      <div class="swiper-slide services-slide">
        <div class="services-slide-background">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="128" height="128" viewBox="0 0 512 512">
            <path fill="currentColor" d="m265.203 361.884-35.157-35.157-21.579 21.579 13.577 13.578h-90.022l33.047-57.239-61.15 16.385-19.573-73.048L0 394.074l38.134 66.05h183.91l-13.577 13.579 21.579 21.578 35.156-35.157h.001l49.119-49.12z"/>
            <path fill="currentColor" d="m417.283 230.019 24.499 6.565 7.898-29.478-53.976-14.462v-.001l-61.149-16.384-22.949 85.646-7.899 29.478 29.478 7.899 3.375-12.597 43.417 75.199h-71.616l49.119 49.12-49.12 49.12h165.505L512 394.074z"/>
            <path fill="currentColor" d="M294.135 16.719h-76.27l-90.36 156.51-3.376-12.598-29.478 7.898 7.899 29.478h.001l22.947 85.647 61.15-16.385h.001l53.974-14.462-7.898-29.478-24.497 6.564L256 147.149l37.402 64.782 19.574-73.049 61.149 16.385z"/>
          </svg>
        </div>
        <img class="services-slide-image" src="https://i.imgur.com/dqAdwTT.png" />
      </div>
    </div>
  </div>
  <div class="services-scrollbar-wrapper">
    <div class="services-scrollbar swiper-scrollbar"></div>
  </div>
</div>

→ Ссылка
Автор решения: Максим 

document.getElementById('next').onclick = mynext;
let slideNumber = 0
function mynext() {
  slide(slideNumber+=1);
}
document.getElementById('prev').onclick = myprev;

function myprev() {
  slide(slideNumber-=1)
}
const test = document.getElementById('track')
function slide (x ){
let y = document.querySelectorAll('.wrap').length;
if(x <= 0){
  x = y
}
if (x >= y)
{
  x = 0
}
test.style.transform = 'translateX(-' + x*33 + '%)'
}
.fancybox{
 background-color: black;
     width: 600px;
    height: 400px;
 position: relative;
 overflow: hidden;
}
.fancybox__track{
 height: 100%;
    display: flex;
    transition: transform 3s;
     gap:20px;
}


.wrap{
  width: 33%;
    height: 100%;
    display: flex;
align-items: center;
justify-content: center;
}
.wrap div{
  width: 500px;
    height: 300px;
   background-color: burlywood;
}
.btn-next{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
   background-color: #fff;
    z-index: 100;
}
.btn-prev{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
   background-color: #fff;
    z-index: 100;
}
.red{
background-color: red;
}
   
    <div
      class="fancybox">
       <div class="btn-next" id="next">next</div>
        <div class="btn-prev" id="prev">prev</div>
   <div
      class="fancybox__track"
      id="track"
      style={{ transform: `translateX(-${slideNumber * 100}%)` }}
    >
     <div class="wrap">
     <div>2</div>
     </div>
     
          <div class="wrap">
     <div>2</div>
     </div>
     
          <div class="wrap">
     <div>2</div>
     </div>
     
          <div class="wrap red">
     <div>2</div>
     </div>
     
      <div class="wrap">
     <div>2</div>
     </div>
     
          <div class="wrap red">
     <div>2</div>
     </div>
     
          <div class="wrap">
     <div>2</div>
     </div>
      <div class="wrap">
     <div>2</div>
     </div>
     
          <div class="wrap red">
     <div>2</div>
     </div>
     
          <div class="wrap">
     <div>2</div>
     </div>
    
    </div>
    </div>

смотри тут бысро набросал слайдер для наглядности

  1. это коробка где будет крутить наше содержимое (fancybox) у него должно быть свойство overflow: hidden; что бы от переполнения он не превратился в скролл
  2. это трек где будут располагаться наши слайды (fancybox__track) размещаем тут наши слайды которые будет меняться при помощи свойства transform которое прописано в js
  3. сами слайды (wrap) сами слайды ширину и высоту которых стоит менять в зависимости от того сколько хочешь ты видеть за раз слайдов , так же стоит отметить % процент смещения так как у нас 3 слайда то процент составляет 33% (100 / 3) и уже внутри этих слайдов можешь размещать то что тебе нужно
  4. ограничения

let y = document.querySelectorAll('.wrap').length;

смотрит сколь у нас всего слайдов

   if(x <= 0){
      x = y
    }
    if (x >= y)
    {
      x = 0
    }

если дошел до одного из конца полей то он сбросит значение примечание там немного идут слайды по причине кво настроенных слайдов (wrap) будут вопросы пиши в комментариях

→ Ссылка

licensed under cc by-sa 3.0 with attribution.