1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How Put Slider in Image

Discussion in 'HTML & Website Design' started by adelhoss, Oct 14, 2017.

0
  1. #1
    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 :
    <!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>
    HTML:
    and all my css 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();*/
}
#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;
}
    Code (CSS):

    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 .
     
    adelhoss, Oct 14, 2017 IP
  2. adelhoss

    adelhoss Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    this is link all my project (i create manually slider with lightbox but very bad work):
    http://www.mediafire.com/file/4hi4b4vz71cnbih/SH_last-AdelHosseinpour.zip
    Code (markup):
     
    adelhoss, Oct 14, 2017 IP
  3. hostechsupport

    hostechsupport Well-Known Member

    Messages:
    413
    Likes Received:
    23
    Best Answers:
    7
    Trophy Points:
    138
    #3
    Line no.13 Script.js is missing. please insert the code and check it.Kindly let us know in case help needed.
     
    hostechsupport, Nov 5, 2017 IP