Javascript 内容滑块-JQuery的问题_Javascript_Jquery_Html_Css

Javascript 内容滑块-JQuery的问题

javascript jquery html css

Javascript 内容滑块-JQuery的问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用此站点的演示：并尝试在一个页面上实现两个滑块。我正在定制链接演示由于我使用了两个不同的滑块：slider1和slider2，它们具有不同的css，所以我使用global.css作为slider-1，并创建text.css作为slider-2。我注意到js:slides.min.jquery.js文件使用了“css”元素，如slides\u container，next，prev，因此我创建了另一个js:slider.text.jquery.js，根据text.css将css内容

我正在尝试使用此站点的演示：
并尝试在一个页面上实现两个滑块。我正在定制链接演示

由于我使用了两个不同的滑块：slider1和slider2，它们具有不同的css，所以我使用global.css作为slider-1，并创建text.css作为slider-2。我注意到js:slides.min.jquery.js文件使用了“css”元素，如slides\u container，next，prev，因此我创建了另一个js:slider.text.jquery.js，根据text.css将css内容替换为：slides\u containerT，nextT，prevT。但代码不起作用。请帮助我，因为我的项目下周一到期

请帮助解决isse，如果需要更多详细信息，请告诉我

抱歉，我尝试添加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>


演示
$（函数（）{
//将起始滑块设置为1
var startSlide=1；
//获取幻灯片编号（如果存在）
if（window.location.hash）{
startSlide=window.location.hash.replace（'#'，''）；
}
//初始化幻灯片1
$（“#幻灯片1”）。幻灯片({
预加载：正确，
预加载图像：“img/slider/loading.gif”，
代沟：对，
播放：5000，
暂停：2500，
悬停：是的，
//开始滑
开始：开始滑行，
动画完成：功能（当前）{
//将幻灯片编号设置为散列
window.location.hash='#'+当前值；
}
});
//初始化幻灯片2
$（“#幻灯片2”）。幻灯片({
预加载：正确，
预加载图像：“img/slider/loading.gif”，
代沟：对，
播放：5000，
暂停：2500，
悬停：是的，
//开始滑
开始：开始滑行，
动画完成：功能（当前）{
//将幻灯片编号设置为散列
window.location.hash='#'+当前值；
}
});     
});
创新史
幻灯片1
第二张幻灯片
幻灯片2
第三张幻灯片
幻灯片3

干杯

pam

您可以尝试下面的代码

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

其中container是“css”样式

有关各种属性和样式的详细信息，请访问

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