jQuery cycle2 and JQuery Transit not working on first slide

Question

I am using jQuery transit to trying an add some css3 movement to my slides in my jQuery Cycle2 slideshow. I have managed to get all BUT the first slide to have the effect. See my code below.

Like I said, the first slide does not have the effect applied to it. I've got to the point now where I need to reach out! HELP!

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>   

<div id="home-slideshow" class="cycle-slideshow slide-animate"
        data-cycle-timeout="6000"
        data-cycle-speed="1000"
        data-cycle-slides="> div.home-slide-cont"
        data-cycle-fx="fade"
        data-cycle-pause-on-hover="true">

        <div class="home-slide-cont first-slide">
               <div class="full-slide" style="background-image: url('1_large.jpg')"></div>
               <span class="slide-title">
                <blockquote>Title One here</blockquote>
               </span><!-- end .full-width -->
        </div>

        <div class="home-slide-cont ">
            <div class="full-slide" style="background-image: url('2_large.jpg')"></div>
            <span class="slide-title">
                <blockquote>Title Two here</blockquote>
            </span><!-- end .full-width -->
        </div>

        <div class="home-slide-cont ">
            <div class="full-slide" style="background-image: url('3_large.jpg')"></div>
            <span class="slide-title">
                <blockquote>Title Three here</blockquote>
            </span><!-- end .full-width -->
        </div>                  

</div>



 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
         $(document).ready(function() {
             $('#home-slideshow.slide-animate .first-slide div').transition({scale: 1.1}, 9000,'ease'); 

             $('#home-slideshow.slide-animate').on('cycle-after',function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag){
                $('#home-slideshow.slide-animate .cycle-slide-active div').transition({scale: 1.1}, 9000,'ease'); 
             });
        });
    </script> 

    <script type="text/javascript" src="/js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle2.swipe.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cycle2.min.js"></script> 

Thanks for any help on this, massively appreciated.

PART 2

OK, so i have seen that the Google Maps API is causing a conflict, if i remove the api it works.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=weather,panoramio,places,geometry,drawing&language="></script> <script type="text/javascript"> var EE_GMAPS = { version : "3.2.2", base_path : "http://www.domain.com/", act_path : "http://www.domain.com/?ACT=85", api_path : "http://www.domain.com/?ACT=86", } </script> <script type="text/javascript" src="http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js" ></script> 


<script type="text/javascript" src="/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle2.min.js"></script> 
<script type="text/javascript" src="/js/jquery.cycle2.swipe.min.js"></script>

<script type="text/javascript">

     $(document).ready(function() {
        $('#home-slideshow.slide-animate .first-slide div').transition({
          scale: 1.1
        }, 9000, 'ease');
        $('#home-slideshow.slide-animate').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
          $('#home-slideshow.slide-animate .cycle-slide-active div').css({
            scale: 1
          });
        });
        $('#home-slideshow.slide-animate').on('cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
          $('#home-slideshow.slide-animate .cycle-slide-active div').transition({
            scale: 1.1
          }, 9000, 'ease');
        });
      });


                </script> 

Answer 1

Is this what you asked for?

  $(document).ready(function() {
    $('#home-slideshow.slide-animate .first-slide div').transition({
      scale: 1.1
    }, 9000, 'ease');
    $('#home-slideshow.slide-animate').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      $('#home-slideshow.slide-animate .cycle-slide-active div').css({
        scale: 1
      });
    });
    $('#home-slideshow.slide-animate').on('cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      $('#home-slideshow.slide-animate .cycle-slide-active div').transition({
        scale: 1.1
      }, 9000, 'ease');
    });
  });

.full-slide {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=weather,panoramio,places,geometry,drawing&language="></script> <script type="text/javascript"> var EE_GMAPS = { version : "3.2.2", base_path : "http://www.domain.com/", act_path : "http://www.domain.com/?ACT=85", api_path : "http://www.domain.com/?ACT=86", } </script> <script type="text/javascript" src="http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js" ></script>    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.swipe.js"></script>

<div id="home-slideshow" class="cycle-slideshow slide-animate" data-cycle-timeout="6000" data-cycle-speed="1000" data-cycle-slides="> div.home-slide-cont" data-cycle-fx="fade" data-cycle-pause-on-hover="true">

  <div class="home-slide-cont first-slide">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p1.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title One here</blockquote>
               </span>
    <!-- end .full-width -->
  </div>

  <div class="home-slide-cont ">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p2.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title Two here</blockquote>
            </span>
    <!-- end .full-width -->
  </div>

  <div class="home-slide-cont ">
    <div class="full-slide" style="background-image: url('http://malsup.github.io/images/p3.jpg')"></div>
    <span class="slide-title">
                <blockquote>Title Three here</blockquote>
            </span>
    <!-- end .full-width -->
  </div>

</div>

Update

I have added your google api code to above answer. I found it working without any different behavior. I had a quick check at the console and found some errors and warnings instead, all related to your google api codes.

• domain: why is there 'domain.com'?

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.domain.com/themes/third_party/gmaps/js/gmaps.min.js

• sensor: google api says it doesn't require sensor parameter.

SensorNotRequired: https://developers.google.com/maps/documentation/javascript/error-messages util.js:3

I can not say anything more unless you provide your exact faulty code.

Answer 2

Here's a working PEN: http://codepen.io/anon/pen/jWOdwK

Overall, your code seems to be correct, but I've noticed few things:

• you're using a div with a background property as slide containers. This is a bad practice, since you lose the semantic and if the size of the containers are not specified the image will not show at all. Use the <img class="full-slide" src="yourimagepath.ext"> instead
• You've included JQuery twice; one inclusion is enough, keep the one in the bottom;
• Since you're using div as slide container (as I said on my first point), be sure that your full-slide class has width and height specified.

Best!