Swiper, CSS3 making mobile website, folding navigation

Swiper, CSS3 making mobile website, folding navigation

A few days ago the company to update the official website of the mobile end, because the site itself does not have much content, so the designer has made the whole screen sliding appearance, at first I did not look at the design draft agreed, took the hand found a few problems let me not know choose fullpage or choose Swiper to write this project. Is the result of this project.

• Issue 1: Full screen slide two plug-ins can be used, but the mobile end with more than Swiper
• Issue 2: Site navigation to be updated with the page here Fullage is still very useful.
• Question 3: I want to use swiper but not very familiar with swiper how to make navigation (usually do not study the reason of the code)

In fact, each problem is not difficult to take out alone, but put together on a somewhat complex, so the book to the Time square hate a little bit is not false, usually the project less oneself also lazy what also do not study hard ... But finally carefully looked at Swiper, although not alone to introduce how to use Swiper to write navigation but the results of the rotation of the theory is the same, so combined with JQ to achieve this navigation to set the effect of the jump, the code is as follows:

HTML section:

<Divclass= "NAV">    <spanclass= "logo">        <imgsrc= "Img/logo_03.png">    </span>    <spanclass= "Nav_title">Home</span>    <spanclass= "Nav_btn nav_btn_out">        <imgsrc= "Img/daohang_06.png" />    </span></Div><ulclass= "Nav_list">    <Li>Home</Li>    <Li>Secondhand Bargaining Division</Li>    <Listyle= "Display:none;">Secondhand Bargaining Division</Li>    <Listyle= "Display:none;">Secondhand Bargaining Division</Li>    <Li>Consulting Experts</Li>    <Li>Contact Us</Li></ul>

JS section

var New Swiper ('. Swiper-container ', {    ' vertical ',    true,    function  (swiper) {       swiperanimatecache (swiper);       Swiperanimate (Swiper);    },    function(swiper) {        swiperanimate (swiper);        $ (". Nav_title"). Text ($ (' Li '). EQ (swiper.activeindex). html ());   // here is the name of the change title bar     }  });

When you click on the navigation bar

$ (' li '). Click (function() {Swiper.slideto ($ ( This). Index (), 1000)//here is the important place, also control the navigation of the specified jump code$ (". Nav_title"). Text ($ ( This). HTML ()); $(". Nav_list"). Animate ({height:' Toggle '    }); $(". Nav_btn"). Toggleclass ("Nav_btn_click nav_btn_out");});//here is the effect of controlling the navigation folding and reversing$ (". Nav_btn"). Click (function(){    $( This). Toggleclass ("Nav_btn_click nav_btn_out"); $(". Nav_list"). Animate ({height:' Toggle '    });});

In fact, this project does not have any actual work to share, nothing but to me to do a lazy vigilance, code for a long time not to write, will be unfamiliar, the basis is very important.

Many times I always feel that this code is not suitable for me, I do not have much interest in this code, in fact, now feel maybe because I did not study hard because of it, because such a child can not find the fun of the code. More than two years of work, soon three years, spent a fresh period should also give their own plans and goals, otherwise it is too big (blue thin, mushrooms).

Swiper, CSS3 making mobile website, folding navigation