0

My requirement is to create a slider without using extension. So I have created a phtml file with the html code and script for slider and called this phtml file in a cms page. But in the frontend the images are not showing though the script is working.

enter image description here

Could anyone please help me?

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="../image1.jpg" style="width:100%" alt="image1">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="../image2.jpg" style="width:100%" alt="image2">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  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";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

</body>
</html> 

Getting the error:

enter image description here

  • Pls share your phtml code to debug – aravind Aug 31 '19 at 8:46
  • @aravind, I have added the code – Siva Aug 31 '19 at 9:06
1

Please update your image html with below code.

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="<?= $block->getViewFileUrl('images/image1.jpg') ?>" style="width:100%" alt="image1">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="<?= $block->getViewFileUrl('images/image2.jpg') ?>" style="width:100%" alt="image2">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="<?= $block->getViewFileUrl('images/img_mountains_wide.jpg') ?>" style="width:100%">
  <div class="text">Caption Three</div>
</div>

Also you have to upload this images files in

app/design/[Vendor_Theme]/[Theme_Name]/web/images

Hope it will work for you.

|improve this answer|||||
  • I have tried but still not showing the image and I'm getting the error in console which is attached in the question – Siva Aug 31 '19 at 9:37
  • Have you added like this <?= $block->getViewFileUrl('images/img_mountains_wide.jpg') ?> Make sure you have added the "images". And if you magento deploy mode is not set to developer, you have to run "php bin/magento setup:static-content:deploy -f" command – Kishor Thummar Aug 31 '19 at 9:38
  • yes I have added as you said. What should I do now? – Siva Aug 31 '19 at 9:41
  • Have you added images in "app/design/[Vendor_Theme]/[Theme_Name]/web/images" – Kishor Thummar Aug 31 '19 at 9:43
  • Yes, I have added the images into the path app/design/vendor/theme/web/images – Siva Aug 31 '19 at 9:44
0

Just Change Your Image Path in Phtml file with Dynamic URL for Images. Put below code into Image Src.

 <img src="<?= $block->getViewFileUrl('images/image1.jpg') ?>" style="width:100%" alt="image2">

Please Update.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.