JQuery Slideshow error. Картинки перечисляют вниз по странице, а не перетасовывают. Не могу найти ошибку

0

Хорошо, поэтому я кодировал веб-сайт для своего друга, и у меня было все, что работало и почти готово к публикации. Но я, возможно, что-то изменил и прикрутил синтаксис. Это может быть что-то маленькое, как полу-двоеточие (я искал, так что это не так:]). Я не хотел просить о помощи, но я застрял. Пожалуйста помогите.

<!doctype html>
<html lang='en'>
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="The Sweetest Sin" />
        <meta name ="keywords" content = "bakery, sweetestsin, sweetest sin" />
        <title>The Sweetest Sin</title>

        <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <!-- include Cycle plugin -->
        <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.slideshow').cycle({
                    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                });
            });
        </script>

        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1> <a href="index.html"> The Sweetest Sin </a></h1>
                <ul id="nav">
                    <li id ="active"><a href="index.html">Home</a></li>
                    <li><a href="flavors.html">Flavors/Fillings</a></li>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul> <!-- End Nav -->
            </header>   <!-- End Header -->
            <div id="banner"> </div>
            <div class="clearfix">
                <div id="social-media-icons"> 
                    <a href="https://facebook.com" target="_blank"> <img   src="images/facebook.png" /> </a>
                    <a href="https://twitter.com" target="_blank"> <img src="images/twitter.png" /> </a>
                </div> <!--end social -->

                <div class="left">
                    <div class="canvas">
                        <div class="slideshow">
                            <img src="images/image0.jpg" width="500" height="350" />
                            <img src="images/image1.jpg" width="500" height="350" />
                            <img src="images/image2.jpg" width="500" height="350" />
                            <img src="images/image2.5.jpg" width="500" height="350" />
                            <img src="images/image3.jpg" width="500" height="350" />
                            <img src="images/image3.5.jpg" width="500" height="350" />
                            <img src="images/image4.jpg" width="500" height="350" />
                            <img src="images/image4.5.jpg" width="500" height="350" />
                            <img src="images/image5.jpg" width="500" height="350" />
                            <img src="images/image5.5.jpg" width="500" height="350" />      
                            <img src="images/image6.jpg" width="500" height="350" />
                            <img src="images/image6.5.jpg" width="500" height="350" />
                            <img src="images/image7.jpg" width="500" height="350" /> 
                        </div>  <!-- End Slideshow -->
                    </div> <!-- End Canvas -->
                </div> <!-- End Left -->

                <div class="right">

                    <img src="images/thechef.png"/>
                    <h3>Welcome to the bakery</h3>
                    <p>The Bakery is now open!</p>
                </div> <!-- End Right -->
            </div>
            <footer>
                <p>&copy;2012 TheSweetestSin.net</p>
            </footer> <!-- End Footer -->
        </div> <!-- End Wrapper -->
    </body>
</html>
Теги:

1 ответ

0
Лучший ответ

Дайте.slideshow div фиксированную высоту и установите переполнение в скрытое:

.slideshow {
    width: 500px;
    height: 350px;
    overflow: hidden;
}
Поделиться
  • 0
    Спасибо, но слайд-шоу по-прежнему не будет перемещаться по изображениям. Теперь это просто статичное изображение.
  • 0
    Вы проверили консоль JavaScript в своем браузере на наличие ошибок? Кроме того, вы упаковываете код, который вы разместили в $ (document) .ready ()?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню