Create slideshow with javascript

Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

От автора: в этом руководстве вы узнаете, как создать адаптивное полноэкранное слайд-шоу с помощью обычного JavaScript. Чтобы построить его, мы используем несколько различных трюков с интерфейсом. В качестве бонуса мы пойдем на шаг дальше и настроим внешний вид курсора при наведении его на слайд-шоу.

Как обычно, чтобы получить первоначальное представление о том, что мы будем создавать, взгляните на соответствующую демонстрационную версию CodePen (посмотрите более крупную версию для лучшего понимания):

Примечание. В этом руководстве не рассматривается, как сделать слайд-шоу более доступным (например, кнопки). В основном мы сосредоточимся на CSS и JavaScript.

1. Начните с разметки страницы

Для создания слайд-шоу нам понадобится элемент с классом slideshow. В нем мы разместим список слайдов вместе со стрелками навигации.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Каждый слайд будет содержать фоновое изображение. Конечно, если вам нравится, вы можете добавлять дополнительный контент.

По умолчанию отображается первый слайд. Но мы можем настроить это поведение, прикрепив к нужному слайду класс is-active. Вот необходимая разметка:

2. Определите стили

Когда разметка будет готова, мы продолжим работу с основными стилями слайд-шоу.

Компоновка слайдов

По умолчанию все слайды будут накладываться друг на друга. Все они будут скрыты, кроме активного. Чтобы сложить изображения, мы воспользуемся CSS Grid. Фактически, я уже рассмотрел эту технику и ее преимущества по сравнению с традиционным позиционированием в недавнем руководстве. Вот связанные стили:

Каждый div внутри слайда получит свой класс cover. Это преобразует его фоновое изображение в полноэкранное фоновое изображение:

Навигация

Кнопки навигации будут расположены абсолютно внутри слайд-шоу. Каждая из кнопок должна покрывать половину ширины слайд-шоу, а их высота должна быть равна высоте слайд-шоу.

Изначально все кнопки будут скрыты. Но когда мы начнем перемещать курсор внутри слайд-шоу, появится соответствующая кнопка в зависимости от положения мыши. Каждый span внутри кнопки будет иметь стрелку (влево или вправо) в качестве фонового изображения.

По умолчанию цвет этих стрелок будет черным. Однако при перемещении курсора внутри слайд-шоу их цвет должен измениться и создать контраст по отношению к слайд-изображениям. Хитрость для создания этого эффекта заключается в добавлении к спанам mix-blend-mode: difference (или exclusion) и filter: invert(1).

Далее, стили для навигации:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

an easy-to-use Javascript library you can use to make a slideshow on your webpage

License

BoldIdeaInc/slideshow-js

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

This library allows you to create an interactive slideshow on your web page:

Step 1: Create the HTML structure

This example code shows how to put three images in the image gallery, but you can add as many as you want. Just use multiple elements with the same structure as a the first two.

section class pl-s">my-slideshow"> figure> img src pl-s">images/image1.png" height pl-s">300"> figcaption>Caption for image 1figcaption> figure> figure> img src pl-s">images/image2.png" height pl-s">300"> figcaption>Caption for image 2figcaption> figure> figure> img src pl-s">images/image4.png" height pl-s">300"> figcaption>Caption for image 4figcaption> figure> section>

Inside the figure element we have an element (which you should be familiar with), and a element. This is optional, but it serves as a caption for the image.

Each figure element is contained within a element, but we also need to give this section a class name so that the script can easily identify it.

Step 2: Add the stylesheet

You’ll need to use the slideshow-js stylesheet in order to make things look right. Add the stylesheet in the element, before your own website’s stylesheets. This code snippet shows how to load the slideshow-js stylesheet that’s hosted on another server so you don’t have to download it:

link rel pl-s">stylesheet" type pl-s">text/css" href pl-s">https://boldideainc.github.io/slideshow-js/slideshow.css">

Step 3: Add the javascript code

Use the element to load the javascript library (the slideshow.js file). Then use another element to initialize the slideshow. The following code snippet shows how to load the library from another server and initialize it.

It’s best to add javascript code at the end of your element (just before the closing tag).

script src pl-s">https://boldideainc.github.io/slideshow-js/slideshow.js">script> script>makeSlideshow('.my-slideshow');script>

The text in parentheses on the 2nd line is a CSS selector for the slideshow container element. If your slideshow container has the class name «my-slideshow» , you would use ‘.my-slideshow’ for the part in parentheses.

Important: Be sure to always include the closing tag! It’s always required, even when there’s nothing inside the element.

About

an easy-to-use Javascript library you can use to make a slideshow on your webpage

Источник