Images aren't showing in slideshow

Highlighted

Hi, I'm trying to insert my own code as HTML into a section on my Supply theme as the slideshow that's there by default doesn't work the way I want it. When I view the page in a browser when testing it shows and works fine, however when I paste it into the Shopify HTML editor it doesn't show up the images. The text is there and everything looks formatted ok, but no slideshow images.

This is the code..

 


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
.myDiv{
width:100vw;
height:50vh;
background:url('your_image.jpg') no-repeat center center;
background-size:cover;
overflow:visible;
float: left;
padding: 10px;
word-wrap: normal;
max-width: 500px;
min-width: 50%;
 
}
.NanumH1{
font-family: 'Nanum Pen Script', cursive;
font-size: 28px;
color: green;
text-transform: uppercase;
}
.PoppinsBody{
font-family: 'Poppins', sans-serif;
}
</style>
</head>

<body>
<div class="w3-content w3-section myDiv">
</div>
<div class="myDiv" style="font-family: 'Calibri, Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif; font-size: 18;">
<span class="NanumH1">THE PROBLEM...</span><br>
Over 100 million tonnes of plastic is used every year. Over 10 million tonnes of that ends up in our oceans! There are 5 known gyres (ocean garbage patches) that potentially cover up to 16 million km2! That's an area about the size of Europe, India and Mexico!
<br>
The problem is that these patches aren't large islands of plastic, but tiny microplastics that we can't just scoop up out of the ocean without affecting marine life.
And what's even worse is that seafood that we eat has more than likely consumed some of these toxic microplastics, so effectively you're eating your own trash!!
<br>
We also need to think about the damage that we are doing to marine life that are consuming these plastics or getting caught up and tangled in them and it's killing them. 100,000 marine creatures are dying from this and on top of this, over 1 million sea-birds are dying from plastic waste!
<br>
<span class="NanumH1">The solution...</span>
<br>
As it's almost impossible to remove these toxic microplastics from the ocean, prevention is the key and the way forward - <span style="color: green; font-weight: bold;">REDUCE, REUSE, RECYCLE</span>.
<br>
It's easy to get started and you might even save money!

</div>
<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 2 seconds
}
</script>

</body>
 
Any help would be greatly appreciated.
 
TIA 
Pat.
0 Likes
Shopify Partner
11 2 0

Hi ZeroWasteCo,

 

Add this file to sections folder in your theme code. Then show it up on homepage like other section.

 

Hope it can help.

We're Simesy. We build a successful online store for your business.
0 Likes

Awesome, thanks. That has worked..... But where do I put it so that it can appear between sections on my homepage?

I was able to add it to the footer and it worked, but can't find the file that I need to add it to, to get it on my homepage?!

 

TIA

0 Likes

Don't worry, got it worked out - add it to the json file!

0 Likes