У CSS есть div изображений, переходят и прокручиваются

Question

У CSS есть div изображений, переходят и прокручиваются

0

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

<div id="gallerySet1">
                <img src="images/1.2.jpg">
                <img src="images/1.3.jpg">
                <img src="images/1.4.jpg">
                <img src="images/1.5.jpg">
                <img src="images/1.6.jpg">
                <img src="images/1.7.jpg">
                <img src="images/1.8.jpg">
                <img src="images/1.9.jpg">
                <img src="images/1.10.jpg">
                <img src="images/1.11.jpg">
                <img src="images/1.12.jpg">
            </div>

и CSS:

            #gallerySet1{
    display:none;
    z-index:1000000;
    position:absolute;
    top:1500px;
}

#gallerySet1 img{
    float:left;


height:400px;
}

Я пытаюсь показать мои изображения следующим образом:

http://annasafroncik.it/#galleria (нажмите на одно из трех изображений)

user1269625 16 фев. 2014, в 05:57

Источник

0

Вы имеете в виду выровнять их, как элементы на сайте покупок?
Varun 16 фев. 2014, в 04:40
0

Вы говорите, что хотите, чтобы #gallerySet1 имел горизонтальную полосу прокрутки?
EmileKumfa 16 фев. 2014, в 04:41
0

да к горизонтальной полосе прокрутки
user1269625 16 фев. 2014, в 04:42
0

Вот что я пытаюсь сделать: annasafroncik.it/#galleria (нажмите на одно из 3 изображений)
user1269625 16 фев. 2014, в 04:43
0

Вы должны обязательно рассмотреть возможность использования плагина для этого, возможно, п / п плагин используется на этом сайте
EmileKumfa 16 фев. 2014, в 04:48

Показать ещё 3 комментария

Теги:

html

css

1 ответ

Ещё вопросы

Вы имеете в виду выровнять их, как элементы на сайте покупок?
Вы говорите, что хотите, чтобы #gallerySet1 имел горизонтальную полосу прокрутки?
да к горизонтальной полосе прокрутки
Вот что я пытаюсь сделать: annasafroncik.it/#galleria (нажмите на одно из 3 изображений)
Вы должны обязательно рассмотреть возможность использования плагина для этого, возможно, п / п плагин используется на этом сайте

brouxhaha · Accepted Answer · 2014-02-16T03-03-00.000Z

Вам нужно использовать второй div, чтобы обернуть все элементы (так работают слайд-шоу). Если вы используете строго css, вам нужно убедиться, что min-width == общая ширина изображений. Если вы хотите, чтобы это было немного более динамичным, вы можете использовать некоторый JavaScript/jQuery для вычисления ширины всех изображений и установки ширины .wrapper на эту ширину (которую я включил).

DEMO

HTML:

<div id="gallerySet1">
    <div class="wrapper">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/400/300">
        <img src="http://placekitten.com/240/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/40/300">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/200/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/200/300">
        <img src="http://placekitten.com/200/300">
    </wrapper>
</div>

CSS:

#gallerySet1 {
    width: 600px;
    height: 300px;
    overflow-x: scroll;
}
.wrapper {
    min-width: 2200px;
}
.wrapper:after {
    clear: both;
    content:'';
    display: table;
}
img {
    float: left;
}

JQuery:

$(document).ready(function () {
    var imgs = $('img'),
        width = 0,
        wrapper = $('.wrapper');

    imgs.each(function (index) {
        width += $(this).width();
    });

    wrapper.width(width);
});