jQuery DivScroll отображает картинки в несколько строк вместо одной - PullRequest
Новая
       36

jQuery DivScroll отображает картинки в несколько строк вместо одной

2 голосов
/ 30 марта 2012

Я пытаюсь скопировать следующую демонстрацию, как показано здесь:

http://www.smoothdivscroll.com/#quickdemo

Но даже когда я копирую предоставленный код, независимо от ширины / размера страницы, я всегдав конечном итоге с двумя рядами картинок.Если есть 7 изображений, 6 из них будут в ряд, а 7-й будет под этим рядом, в крайнем левом углу, и прокручиваю их, пока я прокручиваю влево и вправо.Вот код, который я использую: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <title>Page Title</title>
    <link rel="Stylesheet" type="text/css" href="jquery/css/smoothDivScroll.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js">    </script>
    <script type="text/javascript" src="jquery/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery.smoothdivscroll-1.2-min.js">    </script>


<script type="text/javascript">
    $(document).ready(function() {
            $("#makeMeScrollable").smoothDivScroll({ 
                    mousewheelScrolling: true,
                    manualContinuousScrolling: true,
                    visibleHotSpotBackgrounds: "always",
                    autoScrollingMode: "onstart",
            });
    });
</script>

</head>
<body>


<div id="makeMeScrollable">
            <img src="jquery/images/demo/field.jpg" alt="Demo image" id="field" />
            <img src="jquery/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
            <img src="jquery/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
            <img src="jquery/images/demo/golf.jpg" alt="Demo image" id="golf" />
            <img src="jquery/images/demo/river.jpg" alt="Demo image" id="river" />
            <img src="jquery/images/demo/train.jpg" alt="Demo image" id="train" />
            <img src="jquery/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
            <img src="jquery/images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>

</body>
</html>

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

Визуально, это то, что я должен получить / что я хочу (<> - это области прокрутки сбоку) 

< [  ] [  ] [  ] [  ] >

И вот что я получаю: 

< [  ] [  ] [  ] >
  [  ]

Надеюсь, это имеет смысл.Любая помощь по этому вопросу будет принята с благодарностью.Я почти скопировал саму страницу, чтобы увидеть, что отличается, но я все еще не могу найти никаких больших расхождений, когда дело доходит до кода jQuery или HTML.

Редактировать: Обновлено с полным исходным кодом страницы.

...