0

我正在尝试使用该站点的演示： http: //slidesjs.com/#overview
并尝试在页面上实现两个滑块。我正在自定义链接演示。

  1. 由于我使用了两个不同的滑块：具有不同 css 的滑块 1 和滑块 2，因此我将 global.css 用于滑块 1，并为滑块 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 代码，但遇到错误。

您能否建议我应该对 js 进行哪些更改：slides.min.jquery.js 以便它使用 css 内容呈现我的第二个滑块：

<!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 回答