Пытаясь достичь этого типа слайдера

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

Вот что у меня есть: HTML

<div class = "detailed-gallery">
        <div class = "arrow-left">
            <div class = "arrow-left-small">
            </div>
        </div>
        <div class = "detailed-gallery-outer">
            <div class = "detailed-gallery-inner">
                <div class = "detailed-gallery-tmb">
                    <img src = "images/office1.jpg" alt = "Executive1" height = "auto" width = "350"/>
                </div>
                <div class = "detailed-gallery-tmb">
                    <iframe src = "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2686.201067203608!2d17.6327019!3d47.680515!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476bbff067c5bc01%3A0x5614666fbf541a35!2zS8OhbHbDoXJpYSB1LiAxLCBHecWRciwgOTAyNA!5e0!3m2!1sen!2shu!4v1415616034067" width = "300" height = "200" frameborder = "0" style = "border:0"></iframe>
                </div>
                <div class = "detailed-gallery-tmb">
                    <img src = "images/office2.jpg" alt = "Executive3" height = "250" width = "250"/>
                </div>
                <div class = "detailed-gallery-tmb">
                    <img src = "images/office3.jpg" alt = "Executive4" height = "250" width = "250"/>
                </div>
                <div class = "detailed-gallery-tmb">
                    <img src = "images/office4.jpg" alt = "Executive5" height = "250" width = "250"/>
                </div>
                <div class = "detailed-gallery-tmb">
                    <img src = "images/office5.jpg" alt = "Executive6" height = "250" width = "250"/>
                </div>
                <div class = "detailed-gallery-tmb">
                    <img src = "images/office5.jpg" alt = "Executive7" height = "250" width = "250"/>
                </div>
            </div>
        </div>
        <div class = "arrow-right">
            <div class = "arrow-right-small">
            </div>
        </div>
    </div>

Мой первый вопрос - как получить вторую часть изображений в нижней части ..

.detailed-gallery-outer {
        overflow: hidden;
        width: 100%;
    }

    .detailed-gallery-inner {
        float: left;
        position: relative;
        width: 3390px;
    }

    .detailed-gallery-tmb {
        float: left;
        margin: 0 10px 0 0;

    }

    .detailed-gallery {
        display: flex;
        justify-content: space-between;
        padding: 0;
        position: relative;
        width: 1140px;
        margin: 0 auto;
    }

    .arrow-left {
        background: #FFFFFF;
        opacity: 0.5;
        cursor: pointer;
        color: ##d1d1d1;
        height: 82px;
        width: 0px;
        align-self: center;
        z-index: 99!important;
    }

    .arrow-right {
        background:#FFFFFF;
        opacity: 0.5;
        color: #d1d1d1;
        cursor: pointer;
        height: 82px;
        width: 0px;
        align-self: center;
    }

    .arrow-left-small { 
        padding: 18px;
        box-shadow: 4px -4px 0 1px black;
        position: relative;
        display: inline-block;
        margin: 40px;
        transform: rotate(225deg);
        right: 20px;
        top:-9px;
    }

    .arrow-right-small {
        padding: 18px;
        box-shadow: 4px -4px 0 1px black;
        position: relative;
        display: inline-block;
        margin: 40px;
        transform: rotate(45deg);
        right: 90px;
        top:-9px;
    }

getbootstrap.com/docs/4.0/components/carousel

— 05.10.2018 17:17

Продолжайте и попробуйте что-нибудь, а затем возвращайтесь, когда столкнетесь с конкретной проблемой, приложив некоторые усилия. :)

— 05.10.2018 17:19

Получил, насколько мог ..

— 05.10.2018 20:20

html css

05.10.2018 17:14

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Посмотри сразу. Я использовал карусель совы.

 $(document).ready(function() {
  $('.custom-slider').owlCarousel({
    margin: 15,
    autoplay: true,
    dots: true,
    loop: false,
    
    
    navText: ['<button type = "button" class = "btn slider-left-btn"><</button>', '<button type = "button" class = "btn slider-right-btn">></button>'],
    nav: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });
});

.detailed-gallery .owl-carousel .item {
    height: auto;
    background: #4DC7A0;
    padding: 13px;
    min-height: 450px;
}
.detailed-gallery .owl-carousel .item .item-top{padding-bottom: 20px;}

<html>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

<div class = "container">
    <div class = "row">
        <div class = "col-md-12 col-lg-12">
            <div class = "detailed-gallery">
                <div class = "owl-carousel owl-theme custom-slider">
                    <div class = "item">
                      <div class = "item-single"><img src = "https://via.placeholder.com/200x420"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-single"><img src = "https://via.placeholder.com/200x420"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class = "item">
                      <div class = "item-top"><img src = "https://via.placeholder.com/200x200"></div>
                      <div class = "item-bottom"><img src = "https://via.placeholder.com/200x200"></div>
                    </div>
                </div>
             </div>   
        </div>
    </div>
</div>    
</html>

06.10.2018 10:30

Другие вопросы по теме

Столбцы переполнения

Выравнивание пользовательской кнопки CSS между двумя элементами в контейнере

Как выбрать теги h2 размером 50 пикселей или выше и изменить их CSS?

Как установить номера списка в верхней части текста?

Сетка бутстрапа с неровными столбцами

Контейнер Flexbox не выравнивает элементы правильно в IE 11

Показать div поверх контейнера img

Если у родителя есть класс, добавьте класс в другой div

Как убрать зазор в заголовке <th> таблицы

Таблица и полоса прокрутки не обновляются

Пытаясь достичь этого типа слайдера

Ответы 1

Другие вопросы по теме

Похожие вопросы