如何在javascript中的活动图像滑块的左侧和右侧包含尖括号

Posted 2023-05-08

【中文标题】如何在javascript中的活动图像滑块的左侧和右侧包含尖括号

【英文标题】：How to include angled brackets to the left and right of the active image slider in javascript

【发布时间】：2020-06-25 00:53:01

【问题描述】：

我有一个简单的图像滑块，如下面的小提琴所示，当有更多图像要显示时，单击活动图像时它会滑动。

如何在活动图像的左侧和右侧添加尖括号，以告知用户并允许用户在图像之间进行转换？

我还想确保在没有更多幻灯片可以向左或向右过渡时不显示尖括号。

我能够在图像上包含箭头，但无法让它们执行与单击下一张或上一张图像时触发幻灯片更改相同的操作。

感谢您的帮助。

$(document).ready(function() 

  let $slider = $(".sliderG");
  let sliderItem = $slider.children(".item.active");
  let i = $slider.children(".item");
  let i2 = $slider.children("#Arrows");
  let ind = 0;
  
  $slider
    .children(".item")
    .each(function() 
      $(this).attr("data-index", ind++);
    );
    
  i.on("click", function(e) 
    const that = $(this);
    let dataIndex = that.data("index");
    $(".item").removeClass("active");
    that.addClass("active");
  );
  
  i2.on("click", function(e) 
    const that = $(this);
    let dataIndex = that.data("index");
    $(".item").removeClass("active");
    that.addClass("active");
  );
  
);

.sliderG 
  width: 75%;
  height: 80%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50px;

.sliderG .item 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
  background: url(https://www.g-money.com.gh/wp-content/uploads/2019/06/squircle-minG.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 10px;
  transition: all ease 0.7s;
  z-index: 1;
  transform: scale(0.8);
  left: -300px;
  right: 0;
  margin: 0 auto;

.sliderG .item.active 
 left: 0;
  right: 0;
  z-index: 2;
  opacity: 1;
  background: #ccc;
  transform: scale(1);

.sliderG .item img
   display: block;
   width: 100%;

.sliderG .item.active ~ .item 
  left: 0;
  right: -300px;


.sliderG .item.active + .item ~ .item 
  opacity: 0.3;
  visibility: hidden;

.sliderG .item.active + .item ~ .item:hover
	opacity: 0.7;



#Arrows
	display: flex;
	justify-content: space-between;
	height: auto;
    position: absolute;
    width: 100%;
    z-index: 9;
    top: 50%;


#Arrows i
	background-color: rgba(255, 255, 255, 0.25);
	color: #1C1D21;
	cursor: pointer;
	height: auto;
	padding: 15px;
	transition: background-color 0.5s, color 0.5s;


#Arrows i:first-of-type
   
	padding-right: 20px;


#Arrows i:last-of-type
   
	padding-left: 20px;


#Arrows i:hover
	background-color: rgba(28, 29, 33, 0.75);
	color: #EEEFF7;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='sliderG'>
  <div class='item'>
    <img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Sending-MoneyT-scaled.jpg"  >
  </div>
  <div class='item active'>
    <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" >
    
  </div>
  <div class='item'>
    <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Pay-MerchantT-scaled.jpg" >
    
  </div>
  <div class='item'>
    <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Buy-AirtimeT-scaled.jpg" >
    
  </div>
    <div class='item'>
    <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Bank-ServiceT-scaled.jpg" >
   
  </div>
  <div class='item'>
    <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/03/Withdraw-at-AgentT-scaled.jpg" >
    
  </div>
  <!--<div class='item'>
    <img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" >
  </div>-->
<div id="Arrows">
			<i id="Prev" class="fa fa-chevron-left fa-3x" aria-hidden="true"></i>
			<i id="Next" class="fa fa-chevron-right fa-3x" aria-hidden="true"></i>
		</div>
</div>
</div>

【问题讨论】：

检查这个方法：w3schools.com/howto/howto_js_slideshow.asp

我编辑了它添加了一个链接，我持续了几秒钟因为我在移动应用程序上......对不起

使用画布或图像。不能依赖字体，因为浏览器会以不同的方式呈现它们。使用 CSS 作为样式。也许你想在箭头、幻灯片、箭头上使用display:flex 或float:left，同时保持父元素高度。

【参考方案1】：

您好，请尝试以下更改：

<div id="Arrows">G-Money Send Money
            <i id="Prev" onclick="changeSlide('prev');"class=" fa fa-chevron-left fa-3x" aria-hidden="true"></i>
            <i id="Next" onclick="changeSlide('next');"class=" fa fa-chevron-right fa-3x" aria-hidden="true"></i>
        </div>
</div>

你的javascript函数应该是这样的：

<script>
$(document).ready(function() 

  let $slider = $(".sliderG");
  let sliderItem = $slider.children(".item.active");
  let i = $slider.children(".item");
  //let i2 = $slider.children("#prev");
  let ind = 0;

  $slider
    .children(".item")
    .each(function() 
      $(this).attr("data-index", ind++);
    );

  i.on("click", function(e) 
    const that = $(this);
    let dataIndex = that.data("index");
    //alert(dataIndex);
    $(".item").removeClass("active");
    that.addClass("active");
  );

);
    function changeSlide(n) 
      $('#Next').css("display", "block");
      $('#Prev').css("display", "block");

      let $slider = $(".sliderG");
      //console.log(n);
      var len = $slider.children(".item").length;
      if(n == 'prev')
       //alert(n);
        var sliderItem = $slider.children(".item.active").prev();
      
      else 
        var sliderItem = $slider.children(".item.active").next();
      
      let index = sliderItem.data("index");
      if(index != undefined) 
        //alert(index);
        $(".item").removeClass("active");
        sliderItem.addClass("active");
        if(index == 0) 
          $('#Prev').css("display", "none");
        
        else if(index == len-1) 
          $('#Next').css("display", "none");
           
       
    
</script>

【讨论】：

我已经测试了按预期工作的 changeSlide 函数。只需尝试通过您自己的 css 逻辑调整两个箭头。

谢谢@Vaibhav 除了一个小错误外，它的表现非常出色。当您在幻灯片用完后继续单击箭头时，它会卡住所有内容。

@Selase 好的，我已经更新了函数。您能否重新检查一下，如果有任何问题，请告诉我。

@Selase 我也更新了代码以隐藏上一个和下一个按钮。