我试图在OpenCart 3主页的标签式幻灯片中制作幻灯片以上。
我制作但它只适用于通常的HTML。当我把它放在OpenCart 3中时，幻灯片就会损坏。
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();* {box-sizing: border-box}
body {margin:0; padding:0;}
*{box-sizing: border-box; -webkit-box-sizing: border-box; }
/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
https://stackoverflow.com/a/34696029/383904
*/
.CSSgal2 {
position: relative;
overflow: hidden;
height: 100%; /* Or set a fixed height */
}
/* slider2 */
.CSSgal2 .slider2 {
height: 100%;
white-space: nowrap;
font-size: 0;
transition: 0.8s;
}
/* SLIDES */
.CSSgal2 .slider2 > * {
font-size: 1rem;
display: inline-block;
white-space: normal;
vertical-align: top;
height: 100%;
width: 100%;
background: none 50% no-repeat;
background-size: cover;
}
/* PREV/NEXT, CONTAINERS & ANCHORS */
.CSSgal2 .prevNext {
position: absolute;
z-index: 1;
top: 50%;
width: 100%;
height: 0;
}
.CSSgal2 .prevNext > div+div {
visibility: hidden; /* Hide all but first P/N container */
}
.CSSgal2 .prevNext a {
background: #fff;
position: absolute;
width: 60px;
height: 60px;
line-height: 60px; /* If you want to place numbers */
text-align: center;
opacity: 0.7;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
}
.CSSgal2 .prevNext a:hover {
opacity: 1;
}
.CSSgal2 .prevNext a+a {
left: auto;
right: 0;
}
/* NAVIGATION */
.CSSgal2 .bullets {
position: absolute;
z-index: 2;
bottom: 0;
padding: 10px 0;
width: 100%;
text-align: center;
}
.CSSgal2 .bullets > a {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-decoration: none;
text-align: center;
background: rgba(255, 255, 255, 1);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.CSSgal2 .bullets > a+a {
background: rgba(255, 255, 255, 0.5); /* Dim all but first */
}
.CSSgal2 .bullets > a:hover {
background: rgba(255, 255, 255, 0.7) !important;
}
/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal2 >s:target ~ .bullets >* { background: rgba(255, 255, 255, 0.5);}
/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255, 1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255, 1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255, 1);}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255, 1);}
/* More slides? Add here more rules */
/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal2 >s:target ~ .prevNext >* { visibility: hidden;}
/* ACTIVE: */
#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
#s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
/* More slides? Add here more rules */
/* slider2 ANIMATION POSITIONS */
#s1:target ~ .slider2 {transform: translateX( 0%); -webkit-transform: translateX( 0%);}
#s2:target ~ .slider2 {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slider2 {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s4:target ~ .slider2 {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
/* More slides? Add here more rules */
/* YOU'RE THE DESIGNER!
____________________
All above was mainly to get it working :)
CSSgal2 CUSTOM STYLES / OVERRIDES HERE: */
.CSSgal2{
color: #fff;
text-align: center;
}
.CSSgal2 .slider2 h2 {
margin-top: 40vh;
font-weight: 200;
letter-spacing: -0.06em;
word-spacing: 0.2em;
font-size: 3em;
}
.CSSgal2 a {
border-radius: 50%;
margin: 0 3px;
color: rgba(0,0,0,0.8);
text-decoration: none;
}
/* Style the tab */
.tab {
float: left;
width: 20%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: white;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
width: 80%;
border-left: none;
height: 300px;
}<div class="tab">
<button class="tablinks" onClick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onClick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onClick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<div class="CSSgal2">
<!-- Don't wrap targets in parent -->
<s id="s1"></s>
<s id="s2"></s>
<s id="s3"></s>
<s id="s4"></s>
<div class="slider2">
<div style="background:#5b8;">
<h2>PURE <b>CSS</b> SLIDESHOW</h2>
<p>Responsive Slideshow Gallery created using CSS only<br>by Roko</p>
</div>
<div style="background:#85b;">
<h2>Slide 2</h2>
</div>
<div style="background:#e95;">
<h2>Slide 3</h2>
</div>
<div style="background:#e59;">
<h2>Slide 4</h2>
</div>
</div>
<div class="prevNext">
<div><a href="#s4"></a><a href="#s2"></a></div>
<div><a href="#s1"></a><a href="#s3"></a></div>
<div><a href="#s2"></a><a href="#s4"></a></div>
<div><a href="#s3"></a><a href="#s1"></a></div>
</div>
<div class="bullets">
<a href="#s1">1</a>
<a href="#s2">2</a>
<a href="#s3">3</a>
<a href="#s4">4</a>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>test</h3>
<p>test</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>test</h3>
<p>test</p>
</div>