مشکل با رپیتر و اسلایدشو

[mahmata]

سلام
من یه اسلایدشو رو با استفاده از repeater به بانک متصل کردم اما مشکل اینجاست که اسلایدشو فقط یک صفحه میشه و همه مطالب و عکسها رو با هم نشون میده!
باید چیکار کنم خواهشا راهنماییم کنید؟
<div class="da-slide"> <asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<h2><%#Eval("title")%></h2>
<p><%#Eval("short") %></p>
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="da-link" NavigateUrl='<%#"Continue.aspx?id="+Eval("id") %>'>ادامه</asp:HyperLink>

<div class="da-img">
<asp:Image ID="Image3" runat="server" ImageUrl='<%#Eval("img") %>' /></div>

</ItemTemplate>
</asp:Repeater>


اینم عکس از اسلاید شو

[mahmata]

کسی نیست منو راهنمایی کنه :افسرده:

[mmm201]

شما کد jquery که کلاس da-slide دادی بهش هم بزار

[mahmata]

این کدای جی کوئریه که توی خود فایل اسلایدشویی که دانلود کردم بود منم ازش استفاده کردم
<script type="text/javascript" src="js/jquery.cslider.js"></script> <script type="text/javascript">
$(function () {


$('#da-slider').cslider({
autoplay: true,
bgincrement: 450
});


});
</script>


(function( $, undefined ) {
/*
* Slider object.
*/
$.Slider = function( options, element ) {

this.$el = $( element );

this._init( options );

};

$.Slider.defaults = {
current : 0, // index of current slide
bgincrement : 50, // increment the bg position (parallax effect) when sliding
autoplay : false,// slideshow on / off
interval : 4000 // time between transitions
};

$.Slider.prototype = {
_init : function( options ) {

this.options = $.extend( true, {}, $.Slider.defaults, options );

this.$slides = this.$el.children('div.da-slide');
this.slidesCount = this.$slides.length;

this.current = this.options.current;

if( this.current < 0 || this.current >= this.slidesCount ) {

this.current = 0;

}

this.$slides.eq( this.current ).addClass( 'da-slide-current' );

var $navigation = $( '<nav class="da-dots"/>' );
for( var i = 0; i < this.slidesCount; ++i ) {

$navigation.append( '<span/>' );

}
$navigation.appendTo( this.$el );

this.$pages = this.$el.find('nav.da-dots > span');
this.$navNext = this.$el.find('span.da-arrows-next');
this.$navPrev = this.$el.find('span.da-arrows-prev');

this.isAnimating = false;

this.bgpositer = 0;

this.cssAnimations = Modernizr.cssanimations;
this.cssTransitions = Modernizr.csstransitions;

if( !this.cssAnimations || !this.cssAnimations ) {

this.$el.addClass( 'da-slider-fb' );

}

this._updatePage();

// load the events
this._loadEvents();

// slideshow
if( this.options.autoplay ) {

this._startSlideshow();

}

},
_navigate : function( page, dir ) {

var $current = this.$slides.eq( this.current ), $next, _self = this;

if( this.current === page || this.isAnimating ) return false;

this.isAnimating = true;

// check dir
var classTo, classFrom, d;

if( !dir ) {

( page > this.current ) ? d = 'next' : d = 'prev';

}
else {

d = dir;

}

if( this.cssAnimations && this.cssAnimations ) {

if( d === 'next' ) {

classTo = 'da-slide-toleft';
classFrom = 'da-slide-fromright';
++this.bgpositer;

}
else {

classTo = 'da-slide-toright';
classFrom = 'da-slide-fromleft';
--this.bgpositer;

}

this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );

}

this.current = page;

$next = this.$slides.eq( this.current );

if( this.cssAnimations && this.cssAnimations ) {

var rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
$current.removeClass( rmClasses );
$next.removeClass( rmClasses );

$current.addClass( classTo );
$next.addClass( classFrom );

$current.removeClass( 'da-slide-current' );
$next.addClass( 'da-slide-current' );

}

// fallback
if( !this.cssAnimations || !this.cssAnimations ) {

$next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
left : '0%'
}, 1000, function() {
_self.isAnimating = false;
});

$current.stop().animate( {
left : ( d === 'next' ) ? '-100%' : '100%'
}, 1000, function() {
$current.removeClass( 'da-slide-current' );
});

}

this._updatePage();

},
_updatePage : function() {

this.$pages.removeClass( 'da-dots-current' );
this.$pages.eq( this.current ).addClass( 'da-dots-current' );

},
_startSlideshow : function() {

var _self = this;

this.slideshow = setTimeout( function() {

var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
_self._navigate( page, 'next' );

if( _self.options.autoplay ) {

_self._startSlideshow();

}

}, this.options.interval );

},
page : function( idx ) {

if( idx >= this.slidesCount || idx < 0 ) {

return false;

}

if( this.options.autoplay ) {

clearTimeout( this.slideshow );
this.options.autoplay = false;

}

this._navigate( idx );

},
_loadEvents : function() {

var _self = this;

this.$pages.on( 'click.cslider', function( event ) {

_self.page( $(this).index() );
return false;

});

this.$navNext.on( 'click.cslider', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );
_self.options.autoplay = false;

}

var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
_self._navigate( page, 'next' );
return false;

});

this.$navPrev.on( 'click.cslider', function( event ) {

if( _self.options.autoplay ) {

clearTimeout( _self.slideshow );
_self.options.autoplay = false;

}

var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
_self._navigate( page, 'prev' );
return false;

});

if( this.cssTransitions ) {

if( !this.options.bgincrement ) {

this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {

if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {

_self.isAnimating = false;

}

});

}
else {

this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {

if( event.target.id === _self.$el.attr( 'id' ) )
_self.isAnimating = false;

});

}

}

}
};

var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};

$.fn.cslider = function( options ) {

if ( typeof options === 'string' ) {

var args = Array.prototype.slice.call( arguments, 1 );

this.each(function() {

var instance = $.data( this, 'cslider' );

if ( !instance ) {
logError( "cannot call methods on cslider prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}

if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for cslider instance" );
return;
}

instance[ options ].apply( instance, args );

});

}
else {

this.each(function() {

var instance = $.data( this, 'cslider' );
if ( !instance ) {
$.data( this, 'cslider', new $.Slider( options, this ) );
}
});

}

return this;

};

})( jQuery );

البته دوتا کد جی کوئری دیگه هم هست ولی اونا فک نکنم مرتبط باشه...اگه لازمه اون دوتا رو هم میزارم

[mmm201]

شما وقتی از کلاس استفاده میکنید باید بجای علامت شارپ نقطه بزارید یا اینکه اون کلاس رو تبدیل به ID کنید

<div ID="da-slide">

[mahmata]

نه ببینید اون شارپ مال div قبلی هست من اینجا نگذاشته بودمش



<div id="da-slider" class="da-slider">

<div class="da-slide">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<h2><%#Eval("title")%></h2>
<p><%#Eval("short") %></p>
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="da-link" NavigateUrl='<%#"Continue.aspx?id="+Eval("id") %>'>ادامه</asp:HyperLink>

<div class="da-img">
<asp:Image ID="Image3" runat="server" ImageUrl='<%#Eval("img") %>' /></div>

</ItemTemplate>
</asp:Repeater>
</div>

<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>

[mmm201]

شما لینک script رو اخر صفحه قبل از تگ <body/> قرار بدید ببنید تغییری میکنه

در ضمن شما باید دو تا فایل
جی کوئری لینک داده باشید بالا یکیشو گذاشتید


<script type="text/javascript" src="js/jquery.cslider.js"></script>

<script type="text/javascript">
$(function () {


$('#da-slider').cslider({
autoplay: true,
bgincrement: 450
});


});
</script>

[mahmata]

ببینید من تو خود برنامه لینکاشو گذاشتم...خود اسلاید شو هم به صورت عادی کار میکنه...فقط وقتی ریپیتر میزارم خراب میشه...

[mmm201]

چطور کار میکنه اون عکسی که گذاشتید فقط یه صفحه داره

[mmm201]

شما تگ div رو بیار بعد از ریپیتر قرار بده

[mbasirati]

پلاگین اسلاید شویی که استفاده میکنید از کجاس؟ اینجوری نمیشه کمک کرد. باید مستندات اسلایدشو رو دید تا فهمید اشکال کار شما کجاست.

[mmm201]

مشکل شما استفاده نکردن از تگ ul , li هست کدتون رو به این شکا تغییر بدید:




<div class="da-slide">
<ul>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li>
<h2><%#Eval("title")%></h2>
<p><%#Eval("short") %></p>
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="da-link" NavigateUrl='<%#"Continue.aspx?id="+Eval("id") %>'>ادامه</asp:HyperLink>

<div class="da-img">
<asp:Image ID="Image3" runat="server" ImageUrl='<%#Eval("img") %>' /></div>
</li>
</ItemTemplate>


</asp:Repeater>
</ul>

[anvar]

باید div که کلاس da-slide داره در داخل <ItemTemplate> رپیتر قرار بگیره تا به تعداد ایتم های برگشتی تکرار بشه- شما اون رو در بالای کنترل رپیتر قرار دادید لذا فقط یکبار نمایش داده میشه

کدش میشه

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="da-slide">
<h2><%#Eval("title")%></h2>
<p><%#Eval("short") %></p>
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="da-link" NavigateUrl='<%#"Continue.aspx?id="+Eval("id") %>'>ادامه</asp:HyperLink>
<div class="da-img">
<asp:Image ID="Image3" runat="server" ImageUrl='<%#Eval("img") %>' />
</div>
</div>
</ItemTemplate>
</asp:Repeater>