Как добавить в слайдер изображения из массива (например, локальные изображения или с веб-сайтов)? - PullRequest
Новая
       16

Как добавить в слайдер изображения из массива (например, локальные изображения или с веб-сайтов)?

0 голосов
/ 05 июня 2018

Я хочу сделать этот HTML динамически: изображения и эти «точки», и я хочу загрузить их из массива JavaScript.Помогите, пожалуйста!

<div id="slider" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
        <li data-target="#slider" data-slide-to="0" class="active"></li> 
        <li data-target="#slider" data-slide-to="1"></li> 
        <li data-target="#slider" data-slide-to="2"></li> 
    </ol> 

<div class="carousel-inner"> 
    <div class="item active"> 
        <img src="~/Content/img/sl1.jpg" width="100%" /> 
    </div> 

    <div class="item"> 
        <img src="~/Content/img/sl2.jpg" width="100%" /> 
    </div> 

    <div class="item"> 
        <img src="~/Content/img/3sl.jpg" width="100%" /> 
    </div> 
</div> 

<a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    <span class="sr-only">Next</span> 
</a> 
</div>

Ответы [ 2 ]

0 голосов
/ 22 июля 2019

Вы можете сделать это с помощью начальной загрузки 4 и jquery 

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"></div>

    <script>
    var images = ['//lorempixel.com/300/250/food/4/','//lorempixel.com/300/250/food/2/','//lorempixel.com/300/250/food/3/'];
    buildcarousel("carouselExampleIndicators", images)
    function buildcarousel(id,images){
      var html = $("#"+id).append('<ol class="carousel-indicators"></ol><div class="carousel-inner"></div><a class="carousel-control-prev" href="#'+id+'" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#'+id+'" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>');
      let indicators = html.find('.carousel-indicators');
      let carousel = html.find('.carousel-inner')
      images.forEach((e,i)=>{
        var activeclass = i == 0 ? "active":"";
        indicators.append('<li data-target="#carouselExampleIndicators" data-slide-to="'+i+'" class="'+activeclass+'"></li>');
        carousel.append('<div class="carousel-item '+activeclass+'"><img class="d-block w-100" src="'+e+'" alt="First slide"></div>');
      })
    }
    </script>

Демонстрационная ссылка: https://codepen.io/manab_27/pen/pMjROY

0 голосов
/ 05 июня 2018

Хорошо, извините, попробуйте это: 

   <script language='javascript'>
    var img = ['~/Content/img/sl1.jpg', '~/Content/img/sl2.jpg',  '~/Content/img/sl3.jpg'];

  function viewImage(id, next) {
    let imgElement = document.getElementById(id);

    let index = imgElement.getAttribute('index');
        if (typeof index === 'undefined') {
        index = 0;
    }

    if(next === 'next') {
        index++;
      if (index == img.length) index = 0;
    }
    else{
        index--;
      if (index < 0) index = img.length - 1;
    }

    imgElement.setAttribute('index', index);
    imgElement.src = img[index];
  }

</script>



<div>
  <button onclick="viewImage('image','previous')">PREVIOUS
  </button>
  <button onclick="viewImage('image','next')">NEXT
  </button>
</div>

<div>
  <img id="image" src=""/>
</div>
...