CMP5-Opdracht15

What is a cmp5-opdracht15 How do you make a cmp5-opdracht15? This script and codes were developed by Sanne Van Gastel on 03 October 2021, Sunday.

How do I make an cmp5-opdracht15?
  1. CMP5-Opdracht15 Previews
  2. CMP5-Opdracht15 HTML Codes
  3. CMP5-Opdracht15 CSS Codes
  4. CMP5-Opdracht15 JS Codes
CMP5-Opdracht15 Previews

CMP5-Opdracht15 HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CMP5-Opdracht15</title>
  
  
  <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrapper">
  <h2>Black and white photography</h2>
  <div class="slick-codepen">
    <div>
      <img src="https://65.media.tumblr.com/982a445f8c5e475c5f1f715b14312a2e/tumblr_nxym8dkH621qi1a9fo1_r1_500.jpg" width='500px' height='500px'/>
      1
    </div>

    <div>
      <img src="http://farm9.static.flickr.com/8199/8176088209_2ddab91775.jpg" width='500px' height='500px'/>
      2
    </div>

    <div>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/4b/1b/ea/4b1beae0435c7baa7924f7634ad116cb.jpg" width='500px' height='500px'/>
      3
    </div>

    <div>
      <img src="https://s-media-cache-ak0.pinimg.com/originals/af/50/d7/af50d75d2111d7a1ba3d590b3dbf8123.jpg" width='500px' height='500px'/>
      4
    </div>

    <div class="slick-slide">
      <img src="https://c3.staticflickr.com/1/651/23080139602_432f504584.jpg" width='500px' height='500px'/>
      5
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

CMP5-Opdracht15 CSS Codes

body { 
  background-color: #f4f4f4;
  height: 100%;
  width: 50%;
  margin-left: 22em;
 
}

.wrapper {
  width: 60%;
  margin: 0 auto;
  
  h2 {
    color: #3498DB;
    opacity: .85;
    font-family: 'Pacifico';
    font-weight: 100;
    letter-spacing: 1px;
    font-size: 36px;
    margin: 15px 0;
  }
}

.slick-codepen {
  width: 600px;
  height: 600px;
  background-color: black;
  
  .slick-slide {
    height: 600px !important;
    
    img {
      margin: 0;
      padding: 0;
     }
  }
  
  .slick-prev { left: 0; }
  .slick-next { right: 0; }
  
  .slick-prev, .slick-next {
    background-color: rgba(0, 0, 0, 0);
    top: 10px;
    width: 20%;
    height: 100%;
    transition: all 0.3s ease-out 0s;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.25);
      
      &:before { color: rgba(255, 255, 255, 0.65); }
    }
    
    &:before {
      font-size: 38px;
      color: rgba(0,0,0,0);
      transition: all 0.3s ease-out;
    }
  }
  
  .slick-dots {
    width: 22%;
    left: 40%;
    bottom: -68px;
    border-bottom: 1px solid #3498DB;
    padding: 15px 0;
    
    li.slick-active button:before { color: #3498DB; margin-top: 1px; font-size: 10px;}
  }
}

@media screen and (max-width: 480px) {
  .slick-codepen, .slick-codepen .slick-slide { height: 220px; }
  .wrapper { width: 100%; }
}

CMP5-Opdracht15 JS Codes

$('.slick-codepen').slick({
  draggable: false,
  accessibility: true,
  centerMode: true,
  variableWidth: true,
  slidesToShow: 3,
  speed: 800,
  arrows: true,
  dots: true,
  swipeToSlide: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 3200
});


var prevSlideInterval = null,
    nextSlideInterval = null;

function prevSlideAnimation() { $('.slick-codepen').slickPrev(); };
function nextSlideAnimation() { $('.slick-codepen').slickNext(); };

$('.slick-prev').on('mouseenter', function() {
  prevSlideInterval = window.setInterval(function(){ prevSlideAnimation() }, 200);
});

$('.slick-prev').on('mouseleave', function() {
  window.clearInterval(prevSlideInterval);
});

$('.slick-next').on('mouseenter', function(){
  nextSlideInterval = window.setInterval(function(){ nextSlideAnimation() }, 200);
});

$('.slick-next').on('mouseleave', function() {
  window.clearInterval(nextSlideInterval);
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.