Question

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

因为我使用两个不同的滑块：slider1和slider2具有不同的css所以我使用了global.css作为slider-1并为slider-2创建了text.css。我注意到js：slides.min.jquery.js文件使用'css'元素，如slides_container，next，prev所以我创建了另一个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>

欢呼声 PAM

Answer 1

您可以尝试以下代码。

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

容器是“css”样式。

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

有关http://slidesjs.com/#docs

的各种属性和样式的更多信息

内容滑块 - JQuery的问题

1 个答案: