несколько дней назад я нашел очень хороший код для альбома, и он также подходит для моей программы, но теперь, когда я использую его, у меня есть некоторые ошибки ..
ошибки похожи на то, когда я его открываю сделать что-то действительно странное, например, я нахожусь на второй вкладке и нажимаю кнопку следующей фотографии, но вместо того, чтобы изменять фотографии этого альбома, он меняет фотографии предыдущего альбома. а также первый альбом не перемещается, он всегда засевается ....
Я знаю, что это сложно представить, прошу вас открыть этот код в вашем локальном редакторе .....
Я очень подавлен, пожалуйста, помогите ........ .......
<!DOCTYPE html>
<html>
<head>
<title> Shahmir's CV </title>
<link rel="icon" href="images/cv.png" type="image/x-icon">
<mata charaset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<mata http-equiv="refresh" content="1"></mata>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="cv.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- <script src="https://kit.fontawesome.com/a54d2cbf95.js"></script> -->
</head>
<style>
html {
/* scroll-behavior: smooth; */
}
body {}
#home {
background-image: url(images/background2.png);
background-size: cover;
height: 100vh;
/* i use vh unit becouse to make it fit in the screen */
width: 100%;
z-index: -1;
margin-top: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
/**/
/* filter: grayscale(50%) ; */
}
/*** Album ***/
ul {
margin-top: 90px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
text-decoration: underline;
background-color: transparent;
}
img {
max-width: 100%;
height: auto;
}
.slider {
width: 90vmin;
height: 90vmin;
-webkit-perspective: 100vmin;
perspective: 100vmin;
margin: auto;
-webkit-perspective-origin: top center;
perspective-origin: top center;
position: relative;
box-sizing: border-box;
}
.slider__item {
position: absolute;
bottom: 0;
/* left: 10%; */
width: 100%;
height: 100%;
padding-top: 15vmin;
box-sizing: border-box;
-webkit-transition: -webkit-transform 0.18s ease;
transition: -webkit-transform 0.18s ease;
transition: transform 0.18s ease;
transition: transform 0.18s ease, -webkit-transform 0.18s ease;
}
.slider__item:nth-child(1) {
-webkit-transform: translate3d(0, 0, 0vmin);
transform: translate3d(0, 0, 0vmin);
-webkit-transition-delay: 0s;
transition-delay: 0s;
z-index: 7;
}
.slider__item:nth-child(2) {
-webkit-transform: translate3d(0, 0, -15vmin);
transform: translate3d(0, 0, -15vmin);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
z-index: 6;
}
.slider__item:nth-child(3) {
-webkit-transform: translate3d(0, 0, -30vmin);
transform: translate3d(0, 0, -30vmin);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
z-index: 5;
}
.slider__item:nth-child(4) {
-webkit-transform: translate3d(0, 0, -45vmin);
transform: translate3d(0, 0, -45vmin);
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
z-index: 4;
}
.slider__item:nth-child(5) {
-webkit-transform: translate3d(0, 0, -60vmin);
transform: translate3d(0, 0, -60vmin);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 3;
}
.slider__item:nth-child(6) {
-webkit-transform: translate3d(0, 0, -75vmin);
transform: translate3d(0, 0, -75vmin);
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
z-index: 2;
}
.slider__item:nth-child(7) {
-webkit-transform: translate3d(0, 0, -90vmin);
transform: translate3d(0, 0, -90vmin);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
}
.slider__item:nth-child(8) {
-webkit-transform: translate3d(0, 0, -105vmin);
transform: translate3d(0, 0, -105vmin);
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
z-index: 0;
}
.slider__image {
width: 100%;
height: 80%;
margin-left: 0%;
background-color: #999;
border: 1.5vmin solid rgb(66, 65, 65);
box-sizing: border-box;
box-shadow: 0px 0vmin 0vmin 0px rgba(0, 0, 0, 0.75), 1px 1vmin 2vmin rgba(0, 0, 0, 0.75);
overflow: hidden;
display: block;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.18s ease;
transition: opacity 0.2s ease, -webkit-transform 0.18s ease;
transition: transform 0.18s ease, opacity 0.2s ease;
transition: transform 0.18s ease, opacity 0.2s ease, -webkit-transform 0.18s ease;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.slider__caption {
/* height: 20%; */
font-size: 150%;
margin-top: -2%;
/* top:-42px; */
font-weight: bold;
color: rgba(0, 0, 0, 0.8);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__btn {
/* position: absolute; */
/* bottom: 0; */
left: 0;
right: 0;
/* top: 88%; */
width: 9vmin;
height: 9vmin;
margin: 2vmin auto;
border-right: 2vmin solid rgba(255, 255, 255, 0.8);
border-bottom: 2vmin solid rgba(255, 255, 255, 0.65);
z-index: 100;
cursor: pointer;
-webkit-transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
}
.slider__btn:active {
border-right-color: #dd6;
border-bottom-color: #dd6;
}
.section-title2 {
text-align: center;
color: #000000;
margin-bottom: 10px;
text-transform: uppercase;
/* margin-top: 50PX; */
padding-top: 79px;
}
</style>
<BODY>
<h5 class="section-title2 h1"><u>AC</u>HIEVEMENTS</h5>
<ul class="nav nav-pills mb-3 " id="pills-tab" role="tablist" style="display:flex; justify-content: center; margin-top: 18px;padding-top: px; ">
<li class="nav-item active" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-Random" role="tab" aria-controls="pills-home" aria-selected="true" style="color: rgb(0, 0, 0); font-size: 120%; ">Random</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-web-tab" data-toggle="pill" href="#website" role="tab" aria-controls="pills-profile" aria-selected="false" style="color: rgb(0, 0, 0); font-size: 120%; ">Web</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contactu" role="tab" aria-controls="pills-contact" aria-selected="false" style="color: rgb(0, 0, 0); font-size: 120%; ">Graphic</a>
</li>
</ul>
<!-- Album number 1 -->
<div class="tab-content " id="pills-tabContent" style="display:flex; justify-content: center;text-align:center;margin-top: -23px;">
<div class="tab-pane fade in active" id="pills-Random" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="slider">
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/repo.png"><img class="slider_image" src="images/Achievements/Randam/repo.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">Git Hub Activities</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/freelancing digiskills.png"><img class="slider_image" src="images/Achievements/Randam/freelancing digiskills.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">Freelancing Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/Upwork.png"><img class="slider_image" src="images/Achievements/Randam/Upwork.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">Upwork</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/youtuber.png"><img class="slider_image" src="images/Achievements/Randam/youtuber.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">Youtube Studio Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/seo digiSkills.png"><img class="slider_image" src="images/Achievements/Randam/seo digiSkills.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">SEO Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/StackOverFlow.png"><img class="slider_image" src="images/Achievements/Randam/StackOverFlow.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">StackOverFlow Rank</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/comment.jpeg"><img class="slider_image" src="images/Achievements/Randam/comment.jpeg"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">Youtube Comment Response </figcaption>
</figure>
</div>
<div class="slider__btn" style=" border-right: 2vmin solid rgba(58, 58, 58, 0.8);border-bottom: 2vmin solid rgba(36, 36, 36, 0.65);margin-top:-8%;"></div>
</div>
</div>
<div class="tab-content " id="pills-tabContent" style="display:flex; justify-content: center;text-align:center;margin-top: -23px;">
<div class="tab-pane fade " id="website" role="tabpanel" aria-labelledby="pills-web">
<div class="slider">
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/seo digiSkills.png"><img class="slider_image" src="images/Achievements/Randam/seo digiSkills.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">SEO Certificate</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/StackOverFlow.png"><img class="slider_image" src="images/Achievements/Randam/StackOverFlow.png"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">StackOverFlow Rank</figcaption>
</figure>
<figure class="slider_item" style="">
<a href="images/Achievements/Randam/comment.jpeg"><img class="slider_image" src="images/Achievements/Randam/comment.jpeg"></a>
<figcaption class="slider__caption" style="margin-top: 6px;">Youtube Comment Response </figcaption>
</figure>
</div>
<div class="slider__btn" style=" border-right: 2vmin solid rgba(58, 58, 58, 0.8);border-bottom: 2vmin solid rgba(36, 36, 36, 0.65);margin-top:-8%;"></div>
</div>
<!--
<div class="tab-pane fade" id="pills-web-tab" role="tabpanel" aria-labelledby="pills-web-tab">
<b>shahmir</b>hi
</div> -->
<div class="tab-pane fade " id="pills-contactu" role="tabpanel" aria-labelledby="pills-contact-tab">
DOG
</div>
</div>
</div>
</div>
<!-- content -->
<!-- --------------------------- /Album ------------------------>
<br><br><br><br><br><br><br><br>
<!----------------------- album ---------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(function() {
var btn = $(".slider__btn");
btn.on("click", function() {
$(".slider__item").first().clone().appendTo(".slider");
$(".slider__image").first().css({
transform: "rotateX(-180deg)",
opacity: 0
});
setTimeout(function() {
$(".slider__item").first().remove();
}, 200);
});
});
</script>
<!----------------------- /album ---------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</HTML>
</BODY>