jQuery - slider nie działa. - Forum Pasja Informatyki

Dzień dobry,

tworząc stronę wraz z przyjaciółką natrafiłyśmy na problem dotyczący slider'a. Otóż, skorzystałyśmy z gotowego rozwiązania na stronie http://www.grzegorzkyc.pl/js/jak-zrobic-prosty-slider-przy-pomocy-css-i-jquery-2/ przerobiłyśmy kod pod własne potrzeby. W osobnym dokumencie wszystko działa świetnie, problem rozpoczyna się, gdy chcemy cały kod dodać do gotowej strony. Wyskakuje wtedy błąd w konsoli:

typeerror $(...).ready is not a function jquery

szukałyśmy pomocy z Google, jednak próbując kilku innych opcji nadal nie działa.

KOD HTML

<!DOCTYPE html>
<html>

  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Slider</title>
  <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

  <link rel="stylesheet" href="css/main.css">
  
</head>


  <body>

    
    <section id="slider-section">
      
      <div class="slider-belt">
        <div class="slider-units">
          <div class="slider-unit unit-1">
              <h1>naglowek</h1>
              <p></p>
              <img src="..." alt="">
                <div class="text_center">
                  <a class="" href=""></a>
                </div>
          </div>
          <div class="slider-unit unit-2">
            <h1>naglowek</h1>
              <p></p>
              <img src="..." alt="">
                <div class="text_center">
                  <a class="" href=""></a>
                </div>
          </div>
          <div class="slider-unit unit-3">
             <h1>naglowek</h1>
              <p></p>
              <img src="..." alt="">
                <div class="text_center">
                  <a class="" href=""></a>
                </div>
          </div>
          <div class="slider-unit unit-4">
     <h1>naglowek</h1>
              <p></p>
              <img src="..." alt="">
                <div class="text_center">
                  <a class="" href=""></a>
                </div>
          </div>
        </div>
        <div class="slider-controls">
          <div class="control-dot"></div>
          <div class="control-dot"></div>
          <div class="control-dot"></div>
          <div class="control-dot"></div>
        </div>
      </div>

    </section>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/function.js" type="text/javascript"></script>
  </body>

</html>

KOD CSS:


#slider-section .slider-belt {
    width: 100%;
    height: 834px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: distribute;
    -moz-box-pack: distribute;
    box-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
    -ms-flex-pack: distribute;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; }
    #slider-section .slider-belt .slider-units {
      width: 100%;
      position: relative;
      height: 834px;
    }
      #slider-section .slider-belt .slider-units .slider-unit {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        #slider-section .slider-belt .slider-units .slider-unit.active {
          opacity: 1; }
        #slider-section .slider-belt .slider-units .slider-unit.unit-1 {
          background: url(...) center center;
          background-size: cover; }
        #slider-section .slider-belt .slider-units .slider-unit.unit-2 {
          background: url(...) center center;
          background-size: cover; }
        #slider-section .slider-belt .slider-units .slider-unit.unit-3 {
          background: url(...) center center;
          background-size: cover; }
        #slider-section .slider-belt .slider-units .slider-unit.unit-4 {
          background: url(...) center center;
          background-size: cover; }
    #slider-section .slider-belt .slider-controls {
      width: 20%;
      height: 50px;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: distribute;
      -moz-box-pack: distribute;
      box-pack: distribute;
      -webkit-justify-content: space-around;
      -moz-justify-content: space-around;
      -ms-justify-content: space-around;
      -o-justify-content: space-around;
      justify-content: space-around;
      -ms-flex-pack: distribute; }
      #slider-section .slider-belt .slider-controls .control-dot {
        width: 20px;
        height: 20px;
        background-color: #89160a;
        border-radius: 50%;
        cursor: pointer;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        #slider-section .slider-belt .slider-controls .control-dot.active {
          background-color: green; }

@media screen and (max-width: 768px) {
  #slider-section .slider-belt .slider-units {
    width: 90%; }

  #slider-section .slider-belt .slider-controls {
    width: 280px; } }

jQuery:

$(document).ready(function(){
    slider();
});

function slider(){

    $('.control-dot').first().addClass('active');
    $('.slider-unit').first().addClass('active');

    $('.control-dot').click(function(){
        var $this = $(this),
            $dotLength = $this.parent().children();
            position = $dotLength.index($this);

        $('.control-dot').removeClass('active').eq(position).addClass('active');
        $('.slider-unit').removeClass('active').eq(position).addClass('active');
    });
};

Bardzo prosimy o jakąś podpowiedź co mogło pójść nie tak.

Pozdrawiamy!

Wordpress domyślnie korzysta z jQuery w trybie noConflict, i nie mamy dostępu do zmiennej $

Opcję na rozwiązanie problemu są dwie:

Podmienić wszystkie zmienne $ na jQuery, lub
Opakować cały kod w IIFE, 'podsyłając' jQuery do środka (opcja zalecana)

(function ($) {

    $(document).ready(function(){
       slider();
    });
     
    function slider(){
     
        $('.control-dot').first().addClass('active');
        $('.slider-unit').first().addClass('active');
     
        $('.control-dot').click(function(){
            var $this = $(this),
                $dotLength = $this.parent().children();
                position = $dotLength.index($this);
     
            $('.control-dot').removeClass('active').eq(position).addClass('active');
            $('.slider-unit').removeClass('active').eq(position).addClass('active');
        });
    };

}(jQuery));