Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Oct 2017
    Posts
    1
    Member #
    57563

    How Put Slider in Image

    i divide my page to : two section with two background image
    now i want put jquery slider inside my page .
    all html code my page :
    Code:
    !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"></scriptpt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script rel="stylesheet" href="css/lightbox.min.css">
        <script src="js/lightbox-plus-jquery.min.js"></scriptpt type="text/javascript" src="js/script.js"></scripte>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 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>
        </div>
      </body>
    </html>
    and all css code :
    Code:
    *{
      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();*/
    }
    #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;
    }
    #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%;
    }
    
    }
    i want put slider in this section rounded with oval gold in this picture
    https://i.stack.imgur.com/IJEO9.jpg
    i manually create slider with lightbox plugin
    but very very bad work
    i want use jquery slider .
    this is link all my project (i create manually slider with lightbox but very bad work):
    Code:
    http://www.mediafire.com/file/4hi4b4vz71cnbih/SH_last-AdelHosseinpour.zip

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com