учебные пособия

Учимся создавать адаптивное слайд-шоу с помощью HTML5 + Bootstrap

  Дата публикации: May/2024
{title}

Для тех, кто все еще не знает терминологию, я указываю, что слайд-шоу состоит из последовательности нескольких изображений, представляемых одно за другим, давайте посмотрим, как это делается с использованием html5, css3 и платформы bootstrap3 .

Что нам нужно?

а. Хотя нам не нужен установленный локальный сервер для работы с файлами .html, я рекомендую вам установить некоторые из них, чтобы все наши файлы были организованы в каталог и иметь возможность работать более комфортно, если позже мы захотим добавить код PHP, в этом случае я буду использовать сервер Xampp, вы можете использовать его скачать с //www.apachefr...g/es/index.html

б. Поскольку мы собираемся сделать слайд, нам понадобятся изображения, которые мы собираемся поместить в него, все они должны иметь одинаковый размер в пикселях, я буду использовать некоторые с размером 1200 X 600.

с. Редактор кода на ваш выбор, в этом случае я буду использовать тот, который называется «Скобки» .

Давай начнем


1. Поскольку мы установили Xampp, мы идем в каталог «C: / xampp / htdocs» и создаем новую папку, в этом случае я назову ее «sliderShow_main», внутри нее я создам другую папку и назову ее «images», там я буду помещать изображения, которые я буду использовать в слайд-шоу.

{title}

Нажмите на изображение, чтобы увеличить


2. Теперь мы откроем наш редактор кода, перейдем в меню «Файл> Новый» .

{title}

Нажмите на изображение, чтобы увеличить


И в этом новом файле мы напишем базовый HTML- код.

{title}

Нажмите на изображение, чтобы увеличить


Мы сохраним этот файл с расширением (.html) в папке, созданной на шаге 1 «sliderShow_main» .
3. Позже мы добавим заголовок для файла и ссылки на файлы Bootstrap и jquery, которые нам понадобятся для корректной работы нашего ползунка. У нас есть два варианта, которыми мы можем загрузить эти файлы и разместить их в папках нашего сайта на локальном сервере или добавить их из Интернет, который бы сэкономил нам место на нашем сервере. Я выберу второй вариант, вы увидите, как это сделать на следующем изображении

...

{title}

Нажмите на изображение, чтобы увеличить


4. Позже мы добавим в течение двух

которым мы назначим классы «контейнер» и «col-md-12» соответственно следующим образом

{title}

Нажмите на изображение, чтобы увеличить


Эти два

что мы добавим, поможет нашему слайдеру отображаться на всем доступном пространстве на нашем экране.
5. Так как мы подготовили наш код, мы начнем добавлять элементы, которые будут составлять слайд, давайте посмотрим

...

{title}

Нажмите на изображение, чтобы увеличить


Как видите, мы добавили новый

который мы называем "carousel_1" и назначаем 2 вида начальной загрузки, называемые "carousel" и "slide", обратите внимание, что оба разделены пробелом, кроме того, чтобы слайд работал, необходимо добавить атрибут (data-ride = "carousel" ).
6. В предыдущем слое мы добавим упорядоченный список с классом «карусель-индикаторы», который будет служить для добавления количества индикаторов, соответствующих нашим изображениям, в этом случае мы будем использовать три изображения, поэтому у нас будет три индикатора, начинающих считать от "0".

$config[ads_text5] not found

{title}

Нажмите на изображение, чтобы увеличить


Обратите внимание, что в
  • Из нашего списка мы добавляем атрибут «data-target», в котором мы указываем, на каком слое будет отображаться наш слайд, а атрибут «data-slide-to» численно указывает, на какой элемент нашего слайда мы ссылаемся.
    7. Теперь мы добавим элементы с изображениями, которые будут отображаться, давайте посмотрим код, в нем вы найдете более подробную информацию

    {title}

    Нажмите на изображение, чтобы увеличить


    После того, как мы написали все, что связано с первым элементом, мы просто копируем и вставляем в соответствии с количеством элементов, которое нам нужно, учитывая, что мы должны изменить путь к изображению и что другие элементы не должны содержать «активный» класс.

    {title}

    Нажмите на изображение, чтобы увеличить


    Как вы можете видеть, мы уже добавили 3 элемента с нашими 3 изображениями, и наш код работает, но теперь мы добавим элементы управления (Prev & Next) для перемещения назад и вперед между нашими изображениями, а также добавим некоторые значки. Оставив наш окончательный код следующим образом

    ...

    {title}

    Нажмите на изображение, чтобы увеличить


    Если мы будем правильно выполнять шаги, в нашем браузере мы увидим следующие результаты

    $config[ads_text6] not found ...

    {title}

    Нажмите на изображение, чтобы увеличить

    • 0

    • СТАТЬЯ ПО ТЕМЕ Как отключить автоматическое обновление Instagram

    ..

    Для этого нам нужно будет выполнить шаги, которые мы укажем ниже:

    Чтобы не отставать, не забудьте подписаться на наш канал на YouTube! ПОДПИСЫВАТЬСЯ