banoobagheri

قراردادن اسلایدر در یک عکس

با سلام خدمت طراحان وب عزیز

بنده یک صفحه ی خیلی ساده رو با استفاده از تگ DIV که معرف حضور همه ی عزیزازن هست به دو بخش تقسیم کردم

و در هر دو بخش در با استفاده از CSS برای اونها بک گراند عکس قرار دادم و zindex و طوری قرار دادم که بروی تمام چیزهای دیگر قرار بگیرن

الان تنها مشکل من اینه که می خوام یک اسلایدر در بخشی که مشخص کردم با بیضی طلایی رنگ قرار بدم :

قراردادن اسلایدر در یک عکس

نمی دونم چطور اینکار و باید انجام بدم از چندتا اسلایدر اماده استفاده کردم اما فایده ایی نداشت متاسفانه

این تمام کدهای html بنده :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/lightbox.min.css">
    <script src="js/lightbox-plus-jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <title>Shahriar | Shervin</title>
  </head>
  <body>
    <!-- loading -->
    <div id="loading"><img src="img/Disk.svg" id="loading_gif"></div>
    <!--header-->
    <div id="header" class="container-fluid">
      <div id="contactlink">
        <p href="">Contact</p>
      </div>
      <!-- Header Animation -->
      <div class="eyes">
          <span id="eye1">OO</span>
          <span id="eye2">OO</span>
          <span id="eye3">OO</span>
          <span id="eye4">OO</span>
      </div>
      <div id="skull">
        <img draggable="false" id="logo" src="img/00.png" alt="">
        <img draggable="false" id="sk1" src="img/0000.png" alt="">
        <img draggable="false" id="sk2" src="img/000000.png" alt="">
      </div>
      <div id="main">
        <a id="design" href="">Design & Illustration</a><br>
        <a id="cc" href="">Character Concept</a><br>
        <a id="canim" href="">Cartoon  & Animation</a><br>
        <a id="art" href="">Artworks</a>
      </div>
    </div>
    <!-- Default Page Loaded -->
    <div id="concept" class="container-fluid">
      <!-- Slider -->
      <div id="slider" >
        <ul class="slides ">
          <a href="img/Layer 1.png" data-lightbox="example-set1" class="slide slide1 example-image-link"><img class="example-image " src="img/Layer 1.png" alt="name1"></a>
          <a href="img/Layer 2.png" data-lightbox="example-set1" class="slide slide2 example-image-link"><img class="example-image " src="img/Layer 2.png" alt=""></a>
          <a href="img/Layer 3.png" data-lightbox="example-set1" class="slide slide3 example-image-link"><img class="example-image " src="img/Layer 3.png" alt="name3"></a>
          <a href="img/Layer 4.png" data-lightbox="example-set1" class="slide slide4 example-image-link"><img class="example-image " src="img/Layer 4.png" alt=""></a>
          <a href="img/Layer 5.png" data-lightbox="example-set1" class="slide slide5 example-image-link"><img class="example-image " src="img/Layer 5.png" alt="name5"></a>
          <a href="img/Layer 6.png" data-lightbox="example-set1" class="slide slide6 example-image-link"><img class="example-image " src="img/Layer 6.png" alt=""></a>
		  <a href="img/Layer 7.png" data-lightbox="example-set1" class="slide slide7 example-image-link"><img class="example-image " src="img/Layer 7.png" alt="name7"></a>
		  <a href="img/Layer 8.png" data-lightbox="example-set1" class="slide slide8 example-image-link"><img class="example-image " src="img/Layer 8.png" alt=""></a>
		  <a href="img/Layer 9.png" data-lightbox="example-set1" class="slide slide9 example-image-link"><img class="example-image " src="img/Layer 9.png" alt="name9"></a>
		  <a href="img/Layer 10.png" data-lightbox="example-set1" class="slide slide10 example-image-link"><img class="example-image " src="img/Layer 10.png" alt=""></a>
		  <a href="img/Layer 11.png" data-lightbox="example-set1" class="slide slide11 example-image-link"><img class="example-image " src="img/Layer 11.png" alt=""></a>
		  <a href="img/Layer 12.png" data-lightbox="example-set1" class="slide slide12 example-image-link"><img class="example-image " src="img/Layer 12.png" alt=""></a>
		  </ul>
      </div>
	  <img id="rimage" src="img/next.png"  style="top: 26.5vw;right: 18vw;overflow: hidden !important;position: absolute;cursor:pointer"/>
	  	  <img id="limage" src="img/prev.png" style="top: 26.5vw;right: 78vw;overflow: hidden !important;position: absolute;cursor:pointer"/>
        <p>Character Consept <br> 2003-2013</p>
        <h5>
          ALL IMAGES AND CONTACT COPYRIGHT (C) SHAHRIAR SHERVIN, ALL RIGHTS RESERVED <br>
          EXCEPT WHERE TRADEMARK OR COPYRIGHT IS HELD BY PREVIOUS OWNER
        </h5>
    </div>
    <!-- Contact Section -->
    <div id="contact" class="container-fluid">
      <!-- Slider -->
      <div id="slider" >
        <ul class="slides ">
          <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide1 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
          <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide2 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
          <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide3 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
          <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide4 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
          <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide5 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
          <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide6 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
		  <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide7 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
		  <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide8 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
		  <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide9 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
		  <a href="img/Layer 20.png" data-lightbox="example-set" class="slide slide10 example-image-link"><img class="example-image " src="img/Layer 20.png" alt=""></a>
		  </ul>
      </div>
      <h5>
        ALL IMAGES AND CONTACT COPYRIGHT (C) SHAHRIAR SHERVIN, ALL RIGHTS RESERVED <br>
        EXCEPT WHERE TRADEMARK OR COPYRIGHT IS HELD BY PREVIOUS OWNER
      </h5>
    </div>
  </body>
</html>

این هم تمام کدهای CSS بنده :

*{
  font-family: courier;
}
body{
  background-color: #191919;
}
@keyframes anim1 {
  0% {transform: rotate(3deg); }
  25% {transform: scale(1.03) rotate(-3deg);}
  50% {transform: scale(.98) rotate(0deg);}
  75% {transform: scale(1.03) rotate(-3deg);}
  100% {transform: rotate(3deg);}
}
@keyframes eyes1 {
  0% {opacity: 1;}
  50% {opacity: 0;}
}
#header{
  height: 62vw;
  background-image: url(../img/contact.jpg) !important;

  background-size: 100%;
  z-index: 50;
  background-repeat: no-repeat;
}
.eyes{
  cursor:default;
}
#slider {
  position: absolute;
  top: 24vw;
  right: 22vw;
  width: 55vw;
  height: 8vw;
  z-index: 90;
  /*background: #121212;*/
  -webkit-border-radius: 70vw / 10vw;
  border-radius: 70vw / 10vw;
  overflow: hidden!important;
}

#slider .slides {
  padding: 0;
  margin: 0;
  width: 100vw!important;
  height: 20vw!important;
}

#slider .slide {
  float: right!important;
  list-style-type: none!important;
  width: 12vw!important;
  height: 2vw!important;

}
#slider img{
  margin-top: .5vw;
  width: 12vw;
  padding-left: 1vw;
}

#logo{
  position: absolute;
  width: 12.6vw;
  top: 27.5vw;
  left: 44.3vw;
  transition: all 0.4s;
}
#sk1{
  width: 18vw;
  position: absolute;
  top: 27vw;
  left: 9.5vw;
  transition: all 0.4s;
}
#sk2{
  width: 18vw;
  position: absolute;
  top: 27.5vw;
  right: 8.5vw;
  transition: all 0.4s;
}
#logo:hover{
  animation-timing-function:ease-out;
  animation-fill-mode: both;
  animation-name: anim1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#sk1:hover{
  animation-iteration-count: infinite;
  animation-name: anim1;
  animation-duration: 1s;
  animation-timing-function:ease-out;
  animation-fill-mode: both;
}
#sk2:hover{
  animation-iteration-count: infinite;
  animation-name: anim1;
  animation-duration: 1s;
  animation-timing-function:ease-out;
  animation-fill-mode: both;
}
#eye1{
  position: absolute;
  z-index: 70;
  left:13vw;
  top: 39vw;
  color: blue;
  font-size: 2vw;
  background: #c13535;
  filter: blur(1.2vw);
  animation-name: eyes1;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  /*animation-timing-function:cubic-bezier();*/
}
#eye2{
  position: absolute;
  z-index: 70;
  left:22.3vw;
  top: 39vw;
  color: blue;
  font-size: 2vw;
  background: #c13535;
  filter: blur(1.2vw);
  animation-name: eyes1;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  /*animation-timing-function:cubic-bezier();*/
}
#eye3{
  position: absolute;
  z-index: 70;
  right:12.3vw;
  top: 39vw;
  color: blue;
  font-size: 2vw;
  background: #c13535;
  filter: blur(1.2vw);
  animation-name: eyes1;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
 /* animation-timing-function:cubic-bezier();*/
}
#eye4{
  position: absolute;
  z-index: 70;
  right:21vw;
  top: 39vw;
  color: blue;
  font-size: 2vw;
  background: #c13535;
  filter: blur(1.2vw);
  animation-name: eyes1;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
 /* animation-timing-function:cubic-bezier();*/
}
#loading{
  width: 100%;
  height: 200%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  z-index: 100;
  background-color: #191919;
}
#loading_gif{
  position: fixed;
  margin-top: 20vw;
  margin-right: 44.5vw;
  width: 8vw;
  z-index: 100;
}
a{
  color: #d1d1d1 !important;
}
a:link{
  text-decoration: none !important;
}
a:hover{
  color: white !important;
  text-decoration: none !important;
}
a:visited{
  text-decoration: none !important;
}
a:active{
  text-decoration: none !important;
}
#contactlink p {
  font-size: 1.5vw;
  font-weight: 600;
  padding: 6.5% 3.5%;
  position: absolute;
  margin-top: 27%;
  left: 28%;
  z-index: 50;
  cursor: pointer;
  color: #d1d1d1;
}
#contactlink > p:hover{
  color: white;
}
#main{
  z-index: 50;
  line-height: 2vw;
  text-align: center;
  font-weight: bold;
  font-size: 1.5vw;
  padding: 6.5% 2.6%;
  position: absolute;
  margin-top: 41.5%;
  left: 39%;
}
#concept{
  background-image: url(../img/2222.png);
  background-size: 100%;
  height: 57vw;
  background-repeat: no-repeat;
  width: 100%;
  z-index: 20;
  position: absolute;
}

#concept > p{
  font-weight: bolder;
  text-align: center;
  margin-top: 36vw;
  font-size: 1.5vw;
  color: black;
}
#concept h5{
  font-weight: bolder;
  font-size: 1.2vw;
  margin-top: 13.5vw;
}
#contact h5{
  font-weight: bolder;
  font-size: 1.2vw;
  margin-top: 54vw;
}
#contact{
  background: url(../img/1111.png);
  background-size: 100%;
  height: 57.5vw;
  width: 100%;
  position: absolute;
  display: none;
}

لینک دانلود کامل پروژه

http://www.mediafire.comfile4hi4b4vz71cnbih/SH.zip

لذت یادگیری با توسینسو
به عنوان شخصی که مدت هاست از سایت توسینسو استفاده می کنم باید بگم که واقعاً یکی از بهترین مرجع ها برای ارتقاء دانش شخصی هست. دوره های سایت، راهکارها و مطالب، همگی عالی هستند.
banoobagheri

هیچکس نیست کمک کنه ؟!

پاسخ شما
برای ارسال پاسخ خود وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....