0

i want to create my own slideshow without using any slider plugins hear is my code

-- in the footer ---

<script type="text/javascript"  src="<?php bloginfo( 'template_url' );?>/js/jquery.cycle.all.js"></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$('#slideshow').cycle({
    fx: 'scrollLeft',
    timeout: 3000,
    pager: '#navSlider',
    slideExpr: '#mySlide'
});
</script>

in my front-page.php

<div class="slideContent">
    <div id="navSlider"></div>
    <div id="slideshow" class="pics" style="position: relative; overflow: hidden;">
        <div id="mySlide">
            <div id="textBack"></div>
            <div id="textSlide">the title 1</div>
            <img src="<?php bloginfo( 'template_url' );?>/slideimage/myimage1.jpg">
        </div>
        <div id="mySlide">
            <div id="textBack"></div>
            <div id="textSlide">the title 2</div>
            <img src="<?php bloginfo( 'template_url' );?>/slideimage/myimage2.jpg">
        </div>
    </div>
</div>

-- in css file ----

#slideshow {
    width: 232px;
    height: 232px;
}
#navSlider {
    z-index: 50;
    position:absolute;
    width:19px;
    top:0;
    right:-5px;
}
#navSlider a {
    display:block;
    height:31px;
    margin: 0 0px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    background: #cff;
    text-decoration: none
}
#navSlider a.activeSlide {
    background: #aaf;
    padding:9px 0 0 0;
    text-align:center;
}
#navSlider a:focus {
    outline: none;
}
#textBack {
    background-color:#000;
    /*color:#FFF;*/
    opacity: 0.4;
    height:30px;
    position:absolute;
    right:0;
    bottom:0;
    width:232px;
    /*text-align:center;*/
}
#textSlide {
    color:#fff;
    height:26px;
    position:absolute;
    bottom:0;
    right:10px;
    font-size:18px;
    /* margin:auto;*/
    /* width:232px;*/
    /* text-align:center;*/
}
.pics {
    height: 232px;
    width: 232px;
    padding: 0;
    margin: 0;
}
.pics img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0
}
.slideContent {
    margin: 30px auto;
    width: 244px;
    height: 234px;
    position:relative;
    top: 0;
    left: 0;
    background-color:#069;
}

i create this and actually it works alone very nice but i don't know why it won't work in wordpress and is there any matter if there is another slider? please help

1

Do not use an external jQuery library, use the one that comes with WordPress.

Use wp_enqueue_script to enqueue your scripts, like:

wp_enqueue_script( 'jquery' );

Additionally be aware that WordPress sets the internal jQuery to noConflict() mode, more information about that here.

  • so how to translate this to wp_enqueue_script ?? what i wll do – Hadi Omary Aug 5 '14 at 14:51
  • 1
    Read the documentation I linked, it is pretty straight forward. @HadiOmary – Nicolai Aug 5 '14 at 14:55
1

id="mySlide"is used twice in your markup. Just try removing slideExpr: '#mySlide' from your plugin options.

Try using bloginfo('stylesheet_directory').

  • no this sounds good to me cuz i use it as selector for – Hadi Omary Aug 5 '14 at 14:54
  • Try ialocin's approach and keep in mind to enqueue jquery before enqueueing cycle – stiil Aug 5 '14 at 15:00
  • ok .... this is it ....thanx dud – Hadi Omary Aug 5 '14 at 15:28
  • i put this for test because i will replaced by "featured images" – Hadi Omary Aug 5 '14 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.