• 0
Votes
name

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/question.php

Line Number: 195

Backtrace:

File: /home/u125378470/domains/lawhelpguru.org/public_html/application/views/question.php
Line: 195
Function: _error_handler

File: /home/u125378470/domains/lawhelpguru.org/public_html/application/controllers/Questions.php
Line: 416
Function: view

File: /home/u125378470/domains/lawhelpguru.org/public_html/index.php
Line: 315
Function: require_once

I have the below html code which has the current image in the first div and the second div has multiple images placed horizontally.

class="container"> <div class="column"> <h3>Vanilla JS Slider</h3> <h4 class="arrows"><span class="prev"></span><span> All Kittens </span><span class="next"></span></h4> <img id="display" src="C: amedimagesimg.jpg" marginheight="0" marginwidth="0" /> </div> <div id="content"> <img src="C: amedimagesimg1.jpg" alt="Georges" class="images" /> <img src="C: amedimagesimg2.jpg" alt="Gers" class="images" /> <img src="C: amedimagesimg3.jpg" alt="Providence" class="images" /> <img src="C: amedimagesimg4.jpg" alt="Providence" class="images" /> <img src="C: amedimagesimg5.jpg" alt="Providence" class="images" /> </div>

Jquery code- This is my function but upon clicking on perv and next buttons i am unable to see the next images which should come.

const leftArrow = document.querySelector('.prev');
const rightArrow = document.querySelector('.next');
const imageGallery = document.querySelectorAll("#content img");
const displayImg = document.querySelector("#display");
let activeImageIndex = 0;
window.addEventListener('load', renderSlider);
leftArrow.addEventListener('click', handlePrev);
window.addEventListener('keyup', handlePrev);
rightArrow.addEventListener('click', handleNext);
window.addEventListener('keyup', handleNext);
imageGallery.forEach((image, index) => {
image.addEventListener('click', () => {
    activeImageIndex = index;
    renderDisplayImage(activeImageIndex);
    setActiveClass(activeImageIndex);
    
    
    if(index === 0) leftArrow.style.display = 'none';
    else leftArrow.style.display = 'block';
  })
})



function renderDisplayImage(imageIndex) {
  displayImg.setAttribute('src', urls[imageIndex]);
}

function renderSlider() {
  renderDisplayImage(activeImageIndex);
  imageGallery.forEach((img, index) => {
    img.setAttribute('src', urls[index]);
    if(index === 0) img.classList.add('active');
  })
}

function handlePrev(event) {
  if(event.type === 'keyup' && event.key !== 'ArrowLeft') return;
  
  activeImageIndex = (urls.length + (activeImageIndex-1)) % urls.length;
  renderDisplayImage(activeImageIndex);
  setActiveClass(activeImageIndex);
  
  if(activeImageIndex === 0) leftArrow.style.display = 'none';
  else leftArrow.style.display = 'block';
}


function handleNext() {
  if(event.type === 'keyup' && event.key !== 'ArrowRight') return;
  
  activeImageIndex = (activeImageIndex+1) % urls.length;
  renderDisplayImage(activeImageIndex);
  setActiveClass(activeImageIndex)
  
  if(activeImageIndex > 0) leftArrow.style.display = 'block';
  else leftArrow.style.display = 'none';
}

function setActiveClass(imageIndex) {
  imageGallery.forEach((image, index) => {
    if(index === imageIndex) image.classList.add('active');
    else image.classList.remove('active');
  })
}

CSS- Below is the CSS for Perv and Next Images

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.column img {
  width: 50%;
}

.arrows {
  display: flex;
}

.prev, .next {
  cursor: pointer;  
}

.prev {
  display: none;
}


#content {
  width: 100%;
  display: flex;
  margin-top: 20px;
}

#content img {
  width: 20%;
}

#content img.active {
  width: 20%;
  border: 2px solid red;
}

.prev, .next, .column {
  user-select: none;
}