Четверг, 29 сентября 2022 05:18

Glide.js. Лучший слайдер для сайта

Оцените материал
(3 голосов)

И действительно. Превосходное, на мой взгляд, решение. Кто не пробовал glide.js - очень рекомендую: Glide.js is a dependency-free JavaScript ES6 slider and carousel.

Слайдер вертит картинки, текст, видеоролики - практически любой, вероятно, HTML. Очень гибок, lightweight, flexible and fast, органично встраивается в любой дизайн.

 

Не забываем, Glide - это javascript. Многочисленные "программисты" Joomla и Wordpress не найдут в нем навороченной панели управления, "установки в один клик" и тому подобных вкусностей для любителей-админов. Вам придется инсталлировать glide.js, используя npm или yarn, инициировать js, создать структуру HTML и определить css. Но результат стоит потраченных усилий: можно взглянуть, например, страничку "About" моего rails-блога (ссылка далее), также многочисленные примеры codepen.

Блог на рельсах. Live Demo.

 

Dev banner 3

 

Установка актуальной версии слайдера:

yarn add @glidejs/glide

 или

npm i @glidejs/glide

 

Подключаем идущие в комплекте стили:

<!-- Required Core stylesheet -->
<link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.core.min.css">

<!-- Optional Theme stylesheet -->
<link rel="stylesheet" href="/node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

 

 , также свой css. На вкус и цвет все карандаши разные, мои же стили таковы:

.glide {
  position:absolute;
}

.glide__slide {
  height: 400px;
  opacity: 0.5;
}

.container {
  margin: 0 auto;
  height: 400px;
  max-width: 100% !important;
  color: white;
  font-size: 1.5rem;
  padding: 1rem;
  text-align: center;
}

 

Разметка (элементы отцентрованы под Bootstrap 5):

<div class="d-flex justify-content-center">
	<div class="glide">
		<div class="glide__track" data-glide-el="track">
			<ul class="glide__slides">
				<li class="glide__slide">
					<div class="container d-flex align-items-center justify-content-center" style="background-color: #0033FF;">Note 1</div>
				</li>
				<li class="glide__slide">
					<div class="container d-flex align-items-center justify-content-center" style="background-color: #660000;">Note 2</div>
				</li>
				<li class="glide__slide">
					<div class="container d-flex align-items-center justify-content-center" style="background-color: #009900;">Note 3</div>
				</li>
			</ul>
		</div>
		<div class="glide__arrows" data-glide-el="controls">
			<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
			<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
		</div>
		<div class="glide__bullets" data-glide-el="controls[nav]">
			<button class="glide__bullet" data-glide-dir="=0"></button>
			<button class="glide__bullet" data-glide-dir="=1"></button>
			<button class="glide__bullet" data-glide-dir="=2"></button>
		</div>
	</div>
</div>

 

 Инициализируем и монтируем:

import Glide from '@glidejs/glide'
new Glide('.glide', { autoplay: 4000 }).mount()

 

Все вышесказанное - в контексте актуального релиза glide.js. Долгое время я использовал старый вариант библиотеки; кажется, v.2.0.9 сейчас уже не присутствует в npm. Хотя работает без малейших проблем... Если вам почему-либо неохота импортировать ES6 модуль, вы можете загрузить эту либу у меня и работать по старинке с ней:

var carousel = $('#Carousel').glide({
	type: 'carousel',
	startAt: 1,
	touchDistance: 2
});

 

 css

.glide {
  position: relative;
  width: 100%;
  height: 100%;
}
.glide__wrapper {
  overflow: hidden;
}
.glide__track {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -ms-touch-action: pan-Y;
      touch-action: pan-Y;
  overflow: hidden;
  padding: 0;
}
.glide__track.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.glide__slide {
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.glide__arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.glide__arrow {
  cursor: pointer;
}
.glide__bullets {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.glide--slider .glide__slide {
  float: left;
  clear: none;
}
.glide--carousel.glide--vertical .glide__track {
  overflow: visible;
}
.glide--carousel .glide__slide {
  float: left;
  clear: none;
}
.glide--slideshow .glide__wrapper {
  height: 100%;
}
.glide--slideshow .glide__slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.glide--slideshow .glide__slide.active {
  z-index: 1;
}

.glide__arrows {
  position: absolute;
}
.glide--horizontal .glide__arrows {
  top: 50%;
  width: 92%;
  margin-left: 4%;
}
.glide--vertical .glide__arrows {
  left: 50%;
  height: 88%;
  margin-top: 6%;
}
.glide__arrow {
  position: absolute;
  z-index: 2;
  color: white;
  text-transform: uppercase;
  font: 11px Arial, sans-serif;
  padding: 9px 12px;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  opacity: 1;
  -webkit-transition: opacity 150ms ease, border 300ms ease-in-out;
          transition: opacity 150ms ease, border 300ms ease-in-out;
}
.glide__arrow.disabled {
  opacity: 0.33;
}
.glide__arrow:focus {
  outline: none;
}
.glide__arrow:hover {
  border-color: white;
}
.glide--horizontal .glide__arrow {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.glide--horizontal .glide__arrow.prev {
  left: 0;
}
.glide--horizontal .glide__arrow.next {
  right: 0;
}
.glide--vertical .glide__arrow {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.glide--vertical .glide__arrow.prev {
  top: 0;
}
.glide--vertical .glide__arrow.next {
  bottom: 0;
}
.glide__bullets {
  position: absolute;
  z-index: 2;
  list-style: none;
}
.glide--horizontal .glide__bullets {
  bottom: 8%;
  left: 0;
  width: 100%;
  height: 12px;
  text-align: center;
}
.glide--vertical .glide__bullets {
  top: 50%;
  right: 8%;
  width: 12px;
  height: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.glide__bullets > * {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);
  width: 12px;
  height: 12px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid transparent;
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
}
.glide--horizontal .glide__bullets > * {
  margin: 0 5px;
}
.glide--vertical .glide__bullets > * {
  vertical-align: middle;
}
.glide__bullets > *.active {
  background-color: white;
}
.glide__bullets > *:focus {
  outline: none;
}
.glide__bullets > *:hover,
.glide__bullets > *:focus {
  border: 2px solid white;
  background-color: rgba(255, 255, 255, 0.5);
}

.box {
	color: #fff;
	font-size: 2vw;
	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.module--horizontal {
	width: 70%;
	height: 320px;
	overflow: hidden;
    margin: 20% auto;
    opacity: 0.5;
}

.module--horizontal .box {
	width: 100%;
	height: 320px;
}

 

html

<div class="module module--horizontal">
  <div id="Carousel" class="glide">
    <div class="glide__wrapper">
      <ul class="glide__track">
        <li class="glide__slide" data-glide-autoplay="6000">
          <div class="box" style="background-color: #0033FF;">Note 1</div>
        </li>
        <li class="glide__slide" data-glide-autoplay="6000">
          <div class="box" style="background-color: #660000;">Note 2</div>
        </li>
        <li class="glide__slide" data-glide-autoplay="6000">
          <div class="box" style="background-color: #009900;">Note 3</div>
        </li>
      </ul>
    </div>
    <div class="glide__bullets"></div>
  </div>
</div>

 

Существует glide и под React. Рассмотрим несложную процедуру использования react-glide вкупе с анимацией бэкграунда на основе vanta.js:

npm i react-glide vanta Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript..1 --force

 

App.js

import "./App.css";
import { Glide, GlideProps } from "react-glide";
import "react-glide/lib/reactGlide.css";
import FogComponent from "./components/FogComponent";

const props: GlideProps = {
  height: 450,
  width: 500,
  autoPlay: true,
  autoPlaySpeed: 5000,
  onSlideChange: () => console.log("slide changed"),
  infinite: true,
  dots: true,
};

function App() {
  return (
    <FogComponent>
      <div className="App">
        <header className="App-header">
          <Glide {...props}>
            <img src="/images/1.jpg" alt=" " />
            <img src="/images/2.jpg" alt=" " />
            <img src="/images/3.jpg" alt=" " />
            <div>
              <iframe
                width="500"
                height="371"
                src="https://www.youtube.com/embed/6emElQDVqF4"
                frameBorder="0"
                allowFullScreen
                title="test"
              />
            </div>
          </Glide>
        </header>
      </div>
    </FogComponent>
  );
}

export default App;

 

FogComponent.js

import React, { Component } from "react";
import FOG from "vanta/dist/vanta.fog.min";
import * as THREE from "three";

class FogComponent extends Component {
  constructor() {
    super();
    this.vantaRef = React.createRef();
  }

  componentDidMount() {
    this.vantaEffect = FOG({
      el: this.vantaRef.current,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      highlightColor: 0xb6a574,
      midtoneColor: 0xf5b3a9,
      lowlightColor: 0xa1016,
      baseColor: 0x537dcd,
      blurFactor: 0.6,
      speed: 5.0,
      zoom: 1.5,
    });
  }
  componentWillUnmount() {
    if (this.vantaEffect) this.vantaEffect.destroy();
  }
  render() {
    return (
      <div style={{ height: "100vh", width: "100%" }} ref={this.vantaRef}>
        {this.props.children}
      </div>
    );
  }
}

export default FogComponent;

 

Ну вот как-то так. Впрочем, всегда возможны варианты.

 

Последнее изменениеПятница, 14 октября 2022 11:08
Опубликовано в Скрипты со всего света
Теги
admin

Оставить комментарий

Добавьте ваш комментарий

Наверх

Сейчас на сайте 1010 гостей и нет пользователей

Rails Examples

RSpec. Тестов конспект

Скрипты отовсюду

Read more…

Психологические этюды. Записки сталкера

Space banner 1

Комментарии в блоге

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.