0

このサイトのデモを使用しようとしています: http://slidesjs.com/#overview
で、ページに 2 つのスライダーを実装しようとしています。Linking デモをカスタマイズしています。

  1. 私は2つの異なるスライダーを使用しているので、異なるcssを持つslider1とslider2なので、slider-1にglobal.cssを使用し、slider-2にtext.cssを作成しました。私は js: slides.min.jquery.js ファイルが slides_container, next, prev のような「css」要素を使用していることに気づいたので、別の js :slider.text.jquery.js を作成して css コンテンツを次のように置き換えました: slides_containerT, nextT, prevT text.css に従って。しかし、コードは機能していません。私のプロジェクトは来週の月曜日に締め切られるので、私を助けてください.

問題の解決にご協力ください。詳細が必要な場合はお知らせください。

申し訳ありませんが、html、css、および jquery コードを追加しようとしましたが、エラーが発生しました。

CSSコンテンツで2番目のスライダーをレンダリングするために、jsにどのような変更を加える必要があるかを提案してください:slides.min.jquery.js:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
 <link rel="stylesheet" href="css/new.css">  
 <link rel="stylesheet" href="css/text.css">    
 <script src="js/slider/jquery.min.js"></script>
 <script src="js/slider/slides.min.jquery.js"></script>
 <script src="js/slider/slider.text.jquery.js"></script>
 <script>
 $(function(){
  // Set starting slide to 1
        var startSlide = 1;
        // Get slide number if it exists
        if (window.location.hash) {
            startSlide = window.location.hash.replace('#','');
        }
        // Initialize Slides 1
        $('#slides1').slides({
            preload: true,
            preloadImage: 'img/slider/loading.gif',
            generatePagination: true,
            play: 5000,
            pause: 2500,
            hoverPause: true,
            // Get the starting slide
            start: startSlide,
            animationComplete: function(current){
                // Set the slide number as a hash
                window.location.hash = '#' + current;
            }
        });

    // Initialize Slides 2
        $('#slides2').slides({
            preload: true,
            preloadImage: 'img/slider/loading.gif',
            generatePagination: true,
            play: 5000,
            pause: 2500,
            hoverPause: true,
            // Get the starting slide
            start: startSlide,
            animationComplete: function(current){
                // Set the slide number as a hash
                window.location.hash = '#' + current;
            }
        });     

    });
  </script>



<div id="container">
 <div id="example"> 
  <div id="slides1">
   <div class="slides_container">
  <div class="slide">
   <img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">   
     <div class="tmpSlideCopy">
      <h1>A History of Innovation</h1>
      <p>SLIDE 1  </p>
     </div> 
   </div>
   <div class="slide">
    <img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">   
     <div class="tmpSlideCopy">
      <h1>Second Slide</h1>
      <p>Slide 2</p>
     </div> 
   </div>
   <div class="slide">
   <img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">   
    <div class="tmpSlideCopy">
     <h1>Third Slide</h1>
     <p>Slide 3</p>
    </div>  
   </div>
</div>
<a href="#" class="prev"><img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>


乾杯パム

4

1 に答える 1

0

以下のコードでこれを試すことができます。

$(function(){
  $("#slides").slides({
    container: 'slides_container'
  });
});

コンテナは「css」スタイルです。

        .slides_container {
            width:570px;
            height:270px;
        }

さまざまなプロパティとスタイリングの詳細については、http: //slidesjs.com/#docs を参照してください。

于 2013-03-04T17:49:01.370 に答える