Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2022, 10:49
Интересующийся
Отправить личное сообщение для borzik2h Посмотреть профиль Найти все сообщения от borzik2h
 
Регистрация: 12.03.2022
Сообщений: 10

Сверстать карусель
Подскажите, пожалуйста, как бы по современному сверстать карусель? На данный момент сделал так - https://jsfiddle.net/u32bprcL/

Нужно чтобы следующие слайды шли за первым, а родительский блок обрезал лишние.
Изображения:
Тип файла: jpg carousel.jpg (15.5 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2022, 12:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,189

css for carousel
borzik2h,
как вариант ...
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }

    .page-content {
        width: 60%;
        margin: 2em auto;
        overflow: hidden;
    }



    .slider__list {
        margin: 0;
        padding: 0;
        display: flex;
    }

    .slider__slide {
        margin-top: -1px;
        list-style: none;
        height: 10em;
        line-height: 10em;
        text-align: center;
        color: #192320;
        font-weight: bold;
        background: #00bfff;
        flex: 1 0 100%;
    }

    /* animation */

    .page-content {
        border: 1px solid #00f;
    }

    .slider__slide {
        border-right: 1px solid #00f;
    }

    .slider__list {
        animation: go 25s linear infinite;
    }

    @keyframes go {
        to {
            transform: translateX(-600%);
        }
    }
    </style>
</head>

<body>
    <div class="page-content">
        <section class="slider">
            <ul class="slider__list">
                <li class="slider__slide">Slide 01</li>
                <li class="slider__slide">Slide 02</li>
                <li class="slider__slide">Slide 03</li>
                <li class="slider__slide">Slide 04</li>
                <li class="slider__slide">Slide 05</li>
                <li class="slider__slide">Slide 06</li>
                <li class="slider__slide">Slide 01</li>
            </ul>
        </section>
    </div>
</body>

</html>

Последний раз редактировалось рони, 22.07.2022 в 12:47.
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2022, 10:20
Интересующийся
Отправить личное сообщение для borzik2h Посмотреть профиль Найти все сообщения от borzik2h
 
Регистрация: 12.03.2022
Сообщений: 10

рони, спасибо. Я думал флексами не получится...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Карусель на чистом javascript alexvtokar Элементы интерфейса 1 17.05.2019 16:37
Создать карусель Гаджи jQuery 4 01.09.2015 19:32
Фильтр сортировки съедает карусель ligisayan jQuery 5 01.07.2015 12:40
Карусель. Бесконечная прокрутка. raffx Events/DOM/Window 2 17.07.2014 15:24
Помогите найти нужную карусель. prowoke Общие вопросы Javascript 7 21.07.2011 21:28