Home>

Help solve the problem. There is a slider with this code

<
div class= "slider" >
        <
div class= "item" >
          <
img src= "" alt= "First slide" class= "item-photo" >
          <
div class= "slideText" >
Slide title 1 <
/div >
      <
/div >
      <
div class= "item" >
          <
img src= "" alt= "Second slide" class= "item-photo1" >
          <
div class= "slideText" >
Slide title 2 <
/div >
      <
/div >
      <
div class= "item" >
          <
img src= "" alt= "Third slide" class= "item-photo2" >
          <
div class= "slideText" >
Slide Title 3 <
/div >
      <
/div >
        <
a class= "prev" onclick= "minusSlide ()" >
&
# 10094; <
/a >
        <
a class= "next" onclick= "plusSlide ()" >
&
# 10095; <
/a >
  <
/div >
  <
br >
  <
div class= "slider-dots" >
      <
span class= "slider-dots_item" onclick= "currentSlide (1)" >
<
/span >
        <
span class= "slider-dots_item" onclick= "currentSlide (2)" >
<
/span >
        <
span class= "slider-dots_item" onclick= "currentSlide (3)" >
<
/span >
  <
/div >

JS for slider

var slideIndex= 1;
showSlides (slideIndex);
function plusSlide () {
    showSlides (slideIndex += 1);
}
function minusSlide () {
    showSlides (slideIndex -= 1);
}
function currentSlide (n) {
    showSlides (slideIndex= n);
}
function showSlides (n) {
    var i;
    var slides= document.getElementsByClassName ("item");
    var dots= document.getElementsByClassName ("slider-dots_item");
    if (n >
 slides.length) {
      slideIndex= 1
    }
    if (n <
 1) {
        slideIndex= slides.length
    }
    for (i= 0; i <
 slides.length; i ++) {
        slides [i] .style.display= "none";
    }
    for (i= 0; i <
 dots.length; i ++) {
        dots [i] .className= dots [i] .className.replace ("active", "");
    }
    slides [slideIndex -1] .style.display= "block";
    dots [slideIndex -1] .className += "active";
}

You need to make .item-photo (1,2) take src images from the date attribute, for example: (data-photo= "aezakmi.jpg")

I understand that something like this should work like this: There are sliders, they are laid out and put in the desired div. In data, the attribute must be passed, for example, an array of pictures and placed in the slider when clicked, deleting the active ones.

Completely new to js, ​​if possible to explain /show an example code in as much detail as possible, I will be very grateful!

it is not clear why to transfer from the data attribute to the src attribute. Formulate your question more clearly and describe the problem.

Alexandr2021-10-13 12:07:43

There is a code like this There is also a block and code (in the question) that outputs information from the path above. I need to insert a slide into this block that will pull up src for my images from the path above. the slide itself is there, but it does not reach as in .item-photo to pull pictures from data-photo

Valery Z2021-10-13 12:16:26

well, you can do something like this let path= document.querySelector ('svg'). getAttribute ('data-photo2'); document.querySelector ('. item-photo2'). setAttribute ('src', path)

Alexandr2021-10-13 12:21:12