我根据网站上的示例创建了另一个 slider : enter link description here
我想在我的 wordpress 上获得完全相同的 slider ,当我通过我的网站上的代码时购买我有代码片段的结果:(请你看看这个(如果可能的话尝试检查它). 我试了好几天都没成功:(
谢谢
$switch-speed: 1s;
$slider-number: 5;
$slider-width: 100% / $slider-number;
$image1: 'https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg';
$image2: 'https://meshrepsy.fr/wp-content/uploads/Entrée.jpg';
$image3: 'https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg';
$image4: 'https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg';
$image5: 'https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg';
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #1C2325;
color: #eee;
}
.outer-wrapper {
width: 80%;
margin: 50px auto;
}
// basic styles
.s-wrap {
width: 80%;
margin-bottom: 50px;
padding-bottom: 55%;
position: relative;
border: 2px solid #fff;
background-color: #efefe8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
> input {
display: none;
}
.s-content {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100% * $slider-number;
height: 100%;
font-size: 0;
list-style: none;
transition: transform $switch-speed;
}
.s-item {
display: inline-block;
width: $slider-width;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.s-item-1 {background-image: url($image1);}
.s-item-2 {background-image: url($image2);}
.s-item-3 {background-image: url($image3);}
.s-item-4 {background-image: url($image4);}
.s-item-5 {background-image: url($image5);}
}
.s-type-1 {
.s-control {
position: absolute;
bottom: 18px;
left: 50%;
text-align: center;
transform: translateX(-50%);
transition-timing-function: ease-out;
> label[class^="s-c-"] {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #999;
background-color: #efefe8;
cursor: pointer;
}
}
.s-nav label {
display: none;
position: absolute;
top: 50%;
padding: 5px 10px;
transform: translateY(-50%);
cursor: pointer;
&::before,
&::after {
content: "";
display: block;
width: 8px;
height: 24px;
background-color: #fff;
}
&::before {margin-bottom: -12px;}
&.left {
left: 20px;
&::before {transform: rotate(45deg);}
&::after {transform: rotate(-45deg);}
}
&.right {
right: 20px;
&::before {transform: rotate(-45deg);}
&::after {transform: rotate(45deg);}
}
}
@for $i from 1 through $slider-number {
#s-#{$i}:checked {
& ~ .s-content {transform: translateX(-$slider-width * ($i - 1));}
& ~ .s-control .s-c-#{$i} {background-color: #333;}
& ~ .s-nav .s-nav-#{$i} {display: block;}
}
}
}
.s-type-2 {
.s-content {
animation: slider-animation 50s ease-in-out infinite;
&:hover {animation-play-state: paused;}
}
}
@keyframes slider-animation {
$i: 0;
$j: 0;
$times: ($slider-number - 1) * 2;
@while $i < 100 {
#{$i}%,
#{$i + 7}% {
@if $i < 50 {
transform: translateX(-$slider-width * $j);
} @else {
transform: translateX(-$slider-width * ($times - $j));
}
}
$i: $i + 100 / $times;
$j: $j + 1;
}
}
<html>
<body>
<div class="outer-wrapper">
<div class="s-wrap s-type-1" role="slider">
<input type="radio" id="s-1" name="slider-control" checked="checked">
<input type="radio" id="s-2" name="slider-control">
<input type="radio" id="s-3" name="slider-control">
<input type="radio" id="s-4" name="slider-control">
<input type="radio" id="s-5" name="slider-control">
<ul class="s-content">
<li class="s-item s-item-1"></li>
<li class="s-item s-item-2"></li>
<li class="s-item s-item-3"></li>
<li class="s-item s-item-4"></li>
<li class="s-item s-item-5"></li>
</ul>
<div class="s-nav">
<label class="s-nav-1 right" for="s-2"></label>
<label class="s-nav-2 left" for="s-1"></label>
<label class="s-nav-2 right" for="s-3"></label>
<label class="s-nav-3 left" for="s-2"></label>
<label class="s-nav-3 right" for="s-4"></label>
<label class="s-nav-4 left" for="s-3"></label>
<label class="s-nav-4 right" for="s-5"></label>
<label class="s-nav-5 left" for="s-4"></label>
</div>
</div>
</body>
</html>
最佳答案
使用此代码并确保您的 wordpress 站点中有“jquery”Js,我已将 jquery cdn 包含到 html 代码中。
@charset "UTF-8";
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #1C2325;
color: #eee;
}
.outer-wrapper {
width: 80%;
margin: 50px auto;
}
.s-wrap {
width: 80%;
margin-bottom: 50px;
padding-bottom: 55%;
position: relative;
border: 2px solid #fff;
background-color: #efefe8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.s-wrap > input {
display: none;
}
.s-wrap .s-content {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
font-size: 0;
list-style: none;
transition: transform 1s;
}
.s-wrap .s-item {
display: inline-block;
width: 20%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.s-wrap .s-item-1 {
background-image: url("https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg");
}
.s-wrap .s-item-2 {
background-image: url("https://meshrepsy.fr/wp-content/uploads/Entrée.jpg");
}
.s-wrap .s-item-3 {
background-image: url("https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg");
}
.s-wrap .s-item-4 {
background-image: url("https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg");
}
.s-wrap .s-item-5 {
background-image: url("https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg");
}
.s-type-1 .s-control {
position: absolute;
bottom: 18px;
left: 50%;
text-align: center;
transform: translateX(-50%);
transition-timing-function: ease-out;
}
.s-type-1 .s-control > label[class^="s-c-"] {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #999;
background-color: #efefe8;
cursor: pointer;
}
.s-type-1 .s-nav label {
display: none;
position: absolute;
top: 50%;
padding: 5px 10px;
transform: translateY(-50%);
cursor: pointer;
}
.s-type-1 .s-nav label::before, .s-type-1 .s-nav label::after {
content: "";
display: block;
width: 8px;
height: 24px;
background-color: #fff;
}
.s-type-1 .s-nav label::before {
margin-bottom: -12px;
}
.s-type-1 .s-nav label.left {
left: 20px;
}
.s-type-1 .s-nav label.left::before {
transform: rotate(45deg);
}
.s-type-1 .s-nav label.left::after {
transform: rotate(-45deg);
}
.s-type-1 .s-nav label.right {
right: 20px;
}
.s-type-1 .s-nav label.right::before {
transform: rotate(-45deg);
}
.s-type-1 .s-nav label.right::after {
transform: rotate(45deg);
}
.s-type-1 #s-1:checked ~ .s-content {
transform: translateX(0%);
}
.s-type-1 #s-1:checked ~ .s-control .s-c-1 {
background-color: #333;
}
.s-type-1 #s-1:checked ~ .s-nav .s-nav-1 {
display: block;
}
.s-type-1 #s-2:checked ~ .s-content {
transform: translateX(-20%);
}
.s-type-1 #s-2:checked ~ .s-control .s-c-2 {
background-color: #333;
}
.s-type-1 #s-2:checked ~ .s-nav .s-nav-2 {
display: block;
}
.s-type-1 #s-3:checked ~ .s-content {
transform: translateX(-40%);
}
.s-type-1 #s-3:checked ~ .s-control .s-c-3 {
background-color: #333;
}
.s-type-1 #s-3:checked ~ .s-nav .s-nav-3 {
display: block;
}
.s-type-1 #s-4:checked ~ .s-content {
transform: translateX(-60%);
}
.s-type-1 #s-4:checked ~ .s-control .s-c-4 {
background-color: #333;
}
.s-type-1 #s-4:checked ~ .s-nav .s-nav-4 {
display: block;
}
.s-type-1 #s-5:checked ~ .s-content {
transform: translateX(-80%);
}
.s-type-1 #s-5:checked ~ .s-control .s-c-5 {
background-color: #333;
}
.s-type-1 #s-5:checked ~ .s-nav .s-nav-5 {
display: block;
}
.s-type-2 .s-content {
animation: slider-animation 50s ease-in-out infinite;
}
.s-type-2 .s-content:hover {
animation-play-state: paused;
}
@keyframes slider-animation {
0%,
7% {
transform: translateX(0%);
}
12.5%,
19.5% {
transform: translateX(-20%);
}
25%,
32% {
transform: translateX(-40%);
}
37.5%,
44.5% {
transform: translateX(-60%);
}
50%,
57% {
transform: translateX(-80%);
}
62.5%,
69.5% {
transform: translateX(-60%);
}
75%,
82% {
transform: translateX(-40%);
}
87.5%,
94.5% {
transform: translateX(-20%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-wrapper">
<div class="s-wrap s-type-1" role="slider">
<input type="radio" id="s-1" name="slider-control" checked="checked">
<input type="radio" id="s-2" name="slider-control">
<input type="radio" id="s-3" name="slider-control">
<input type="radio" id="s-4" name="slider-control">
<input type="radio" id="s-5" name="slider-control">
<ul class="s-content">
<li class="s-item s-item-1"></li>
<li class="s-item s-item-2"></li>
<li class="s-item s-item-3"></li>
<li class="s-item s-item-4"></li>
<li class="s-item s-item-5"></li>
</ul>
<div class="s-nav">
<label class="s-nav-1 right" for="s-2"></label>
<label class="s-nav-2 left" for="s-1"></label>
<label class="s-nav-2 right" for="s-3"></label>
<label class="s-nav-3 left" for="s-2"></label>
<label class="s-nav-3 right" for="s-4"></label>
<label class="s-nav-4 left" for="s-3"></label>
<label class="s-nav-4 right" for="s-5"></label>
<label class="s-nav-5 left" for="s-4"></label>
</div>
</div>
关于html - 在 wordpress 网站上显示 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54553372/