Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help (Cycle slider help)

    So far I have entered the coding as well as pasted the lines in my style.css, but can't get the images to actually cycle and looking for help in the line to edit to get it to work. Top scripts before the * is part of the html index, the

    Code:
    <title>Mtg Card Essentials</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/font-awesome.css" />
        <link rel="stylesheet" href="css/font-awesome.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>src="js/cycle.js"</script>
        <script>
        $('#slider').cycle('all');
        </script>
    
    <div id="bodyleft">
            <h2>CURRENT PRODUCTS</h2>
                <div id="slider">
                <img src="img/slider/1.jpg" />
                <img src="img/slider/2.jpg" />
                <img src="img/slider/3.jpg" />
                </div>
    (style.css below)

    Code:
    *{margin:0; padding:0 font-family: Verdana, Geneva, sans-serif}
    body {background:#fff}
    
    #header {width:100%; height:110px; background:#000000}
    #logo {width:30%; height:110px; float:left;}
    #logo img {width:50%; height:100px; margin-left:20%; margin-top:10px}
    
    #link {width:55%; float:left;}
    #link ul {list-style-type:none; float:right; margin-right:20px}
    #link ul li{float:left; margin-left:15px; line-height:30px}
    #link ul li a{text-decoration:none; color:#fff; font-size:10px}
    
    #search input[type=text]{margin-top:10px; border-top-left-radius:3px; border-bottom-left-radius:3px; width:45%; height:30px; outline:none; border-width:0px; padding-left:3%}
    #search_btn{margin-left:8px; border-top-right-radius:3px; border-bottom-right-radius:3px; width:10%; height:30px; outline:none; border-width:0px; font-weight:bold;}
    #cart_btn{border-radius:3px; width:10%; height:30px; outline:none; border-width:0px; font-weight:bold;}
    
    #navbar {width:100%; background:#400040; height:45px}
    #navbar ui{list-style-type:none}
    #navbar ul li{float:left; width:16%; text-align:center; line-height:45px}
    #navbar ul li a{text-decoration: none; color:#FBFBFB; font-size:13px}
    #navbar ul li:hover{transition:all 0.5s; border-top:3px solid #F70C0C; background:#000000}
    
    #navbar li ul{padding:0%;display:none; z-index:999; position:absolute}
    #navbar li:hover ul{margin-top:-3px;box-shado:5px 5px 5px #000; width:180px; display:block; background:#000000}
    #navbar li ul li{border:1px solid #800080; text-align:left; float:none; width:100%}
    #navbar li ul li a{font-size:14px; padding-left:5%}
    #navbar li ul li:hover a{font-size:14px;padding-left:15%; transition:all 1s}
    
    #bodyleft {margin-top:-10px;float:left; width:65%; padding:1%; background:#fff}
    #bodyleft h2{text-shadow:5px 5px 5px #000000; background:#000000; height:40px; color:#fff; text-align:center; line-height:40px; border-radius:3px}
    #bodyleft img{width:100%, height:350px}
    #bodyleft h3{margin-top:10px;text-shadow:5px 5px 5px #000000; padding-left:3%; line-height:40px; Border-radius:3px; background:#000000; color:#fff; height:40px}
    #bodyleft ul{list-style-type:none; margin-top:10px;}
    #bodyleft ul li{float:left; width:32%; height:350px}
    #bodyleft ul li a{text-align:center; font-size:12px; text-decoration:none; color:#000000;}
    #bodyleft ul li a img{width:95%; height:300px; padding-left:0px}
    #bodyleftul ul li:hover{border-radius:3px; border:2px solid #DBF809}
    
    #bodyright {margin-top:-10px;float:right; width:30%; background:#fff; padding:1% 3% 1% 0%}
    #bodyright h3{text-shadow:5px 5px 5px #000000; padding-left:5%; line-height:40px; Border-radius:3px; background:#000000; color:#fff; height:40px}
    #bodyright ul{list-style-type:none}
    #bodyright ul li{float:inherit;margin-bottom:-10px; width=100%; height:350px}
    #bodyright ul li img{width:100%; height:200px; border-radius:1px}
    
    #footer{width:100%; height:40px; background:000000}
    Last edited by VIPStephan; Oct 2nd, 2019 at 10:52 AM. Reason: added code BB tags

  2. #2
    New to the CF scene
    Join Date
    Oct 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
        <title>Mtg Card Essentials</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/font-awesome.css" />
        <link rel="stylesheet" href="css/font-awesome.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>src="js/cycle.js"</script>
        <script>
        $('#slider').cycle('all');
        </script>
        </head>
        <body>
        <div id="header">
            <div id="logo">
            <img src="img/logo.png">
            </div>
            <div id="link">
                <ul>
                    <li> <a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>SIGNUP</a></li>
                    <li> <a href="#"><i class="fa fa-user" aria-hidden="true"></i>LOGIN</a></li>
                </ul>
            </div>
            <div id="search">
                <form method="post">
                <input type="text" placeholder="Search from here.."/>
                    <button id="search_btn"><i class="fa fa-search" aria-hidden="true"></i>Search</button>
                    <button id="cart_btn"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Cart</button>
                </form>
            </div>
            </div>
            <div id="navbar">
            <ul>
                <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>MAGIC SINGLES</a>
                <ul>
    <li><a href="#">Standard</a></li>
    <li><a href="#">Modern</a></li>
    <li><a href="#">Vintage</a></li>
    <li><a href="#">Commander</a></li>
    </ul>
                </li>
                <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>CARD SUPPLIES</a></li>
                <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>SEALED PRODUCT</a></li>
                <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>COUNTERS</a></li>
                <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>TOKENS</a></li>
                <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>VIDEOS</a></li>
                </ul>
            </div><br clear="all" />
            <div id="bodyleft">
            <h2>CURRENT PRODUCTS</h2>
                <div id="slider">
                <img src="img/slider/1.jpg" />
                <img src="img/slider/2.jpg" />
                <img src="img/slider/3.jpg" />
                </div>
                <h3>MAGIC SINGLES</h3>
                <ul>
                    <li>
                <a href="#">
                    <h4>KARN LIBERATED</h4>
                    <img src="img/products/1.jpg">
                    </a>
                    </li>
                        <li>
                <a href="#">
                    <h4>KARN LIBERATED</h4>
                    <img src="img/products/1.jpg">
                    </a>
                    </li>
                        <li>
                <a href="#">
                    <h4>KARN LIBERATED</h4>
                    <img src="img/products/1.jpg">
                    </a>
                    </li><br clear="all" />
                </ul>
                
                <h3>SEALED PRODUCT</h3>
                <ul>
                    <li>
                <a href="#">
                    <h4>KARN LIBERATED</h4>
                    <img src="img/products/1.jpg">
                    </a>
                    </li>
                        <li>
                <a href="#">
                    <h4>KARN LIBERATED</h4>
                    <img src="img/products/1.jpg">
                    </a>
                    </li>
                        <li>
                <a href="#">
                    <h4>KARN LIBERATED</h4>
                    <img src="img/products/1.jpg">
                    </a>
                    </li><br clear="all" />
                </ul>
            </div>
            <div id="bodyright">
                <h3>SPONSORED</h3>
            <ul>
                <li><a href="https://shop.tcgplayer.com/magic/throne-of-eldraine/throne%20of%20eldraine%20booster%20box?partner=sleepingdragongames&utm_campaign=sleepingdragongames&utm_medium=sleepingdragongames&utm_source=sleepingdragongames">
                    <img src="img/offer/adv3.jpg" />
                    </a></li>
                <li><a href="https://www.twitch.tv/gamestormgaming/">
                    <img src="img/offer/adv1.jpg" />
                    </a></li>
                <li><a href="https://www.twitch.tv/jeffhoogland">
                    <img src="img/offer/adv2.jpg" />
                    </a></li>
                </ul>
            </div><br clear="all" />
            <div id="footer">
            <h4>Copyright 2019 &copy Mtg Card Essentials By Frank Crowley</h4>
            </div>
        </body>
    </html>
    Last edited by VIPStephan; Oct 2nd, 2019 at 10:53 AM. Reason: added code BB tags


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •