Отзывчивый переход выглядит странно

Question

Я включил слайд-шоу responsiveslides со стандартными настройками прямо с веб-страницы. Это работает, но переход выглядит очень странно. Изображение заполняет всю ширину экрана, прежде чем принимать правильный размер. Я также получаю «li-dot» на всех изображениях, кроме первого. Вероятно, это связано с CSS, но я не могу найти способ его исправить. Любая помощь по этому вопросу будет оценена по достоинству.

Код Отрывок

<%@ Page Title="XXX" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 

<script src="Scripts/responsiveslides.js"></script> 

<script> 
    $(function() { 
     $(".rslides").responsiveSlides(); 
    }); 
</script> 
<div> 
    <ul class="rslides"> 
    <li><img src="Images/Slides/SAMS-1.png" /></li> 
    <li><img src="Images/Slides/SAMS-2.png" /></li> 
    <li><img src="Images/Slides/SAMS-3.png" /></li> 

</ul> 
</div> 

CSS

*! http://responsiveslides.com v1.54 by @viljamis */ 


.rslides { 
    position: relative; 
    list-style-type: none; 
    overflow: hidden; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    } 


.rslides li { 
    -webkit-backface-visibility: hidden; 
    position: absolute; 
    display: none; 
    list-style-type: none; 
    width: 100%; 
    left: 0; 
    top: 0; 
    } 


.rslides li:first-child { 
    position: relative; 
    display: block; 
    float: left; 
    } 


.rslides img { 
    display: block; 
    height: auto; 
    float: left; 
    width: 100%; 
    border: 0; 
    } 

Answer 1

Я попробовал ваш код в скрипку здесь: http://jsfiddle.net/aLy2D/1/ (с пейджера и навигационные опции) и все работает правильно (ну, я так думаю. ..).

На самом деле, я видел опечатку в коде CSS, может быть, ваша проблема исходит отсюда:

*! http://responsiveslides.com v1.54 by @viljamis */ 

// Multiline comment should start with /* 
/* http://responsiveslides.com v1.54 by @viljamis */ 

И если вы хотите, чтобы показать пейджер, вы должны установить опцию:

$(".rslides").responsiveSlides({ 
    pager: true 
}); 

Полная документация доступна здесь: http://responsiveslides.com/

EDIT: я обновил скрипку с document.ready методом