Swiper -- a solution to the conflict of single page multicast plug-ins

The first way to write the rotation chart ： The outermost box must be filled with swiper-container, After that, a new class is written to distinguish the two rotation graphs , stay swiper-pagination That is, add an attribute name at the position of the small circle point , The style should be defined on the name of the new class  

                        <!--  Shuffling figure  -->
                        <div class="swiper-container swiperone">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"></div>
                                <div class="swiper-slide swiper-two">
                                    <img src="./image/zd-project01/ rectangular  584  Copy .png" alt="">
                                    <h1> Precise appointment </h1>
                                    <p> Accurately calculate different specialties based on big data 、 Different experts 
                                         Reception time , The reservation period of department number source is accurate to 
                                        30 Within minutes, , And based on Intelligent triage knowledge base , by 
                                         Patients provide intelligent online triage recommendations .</p>
                                </div>
                                <div class="swiper-slide"></div>
                            </div>
                            <!-- Add Pagination -->
                        </div>
                        <div class="next swiper-pagination"></div>

The second one is the same ：

                        <div class="swiper-container swipertwo">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"></div>
                                <div class="swiper-slide swiper-two">
                                    <img src="./image/zd-project01/ rectangular  584  Copy .png" alt="">
                                    <h1> Precise appointment </h1>
                                    <p> Accurately calculate different specialties based on big data 、 Different experts 
                                         Reception time , The reservation period of department number source is accurate to 
                                        30 Within minutes, , And based on Intelligent triage knowledge base , by 
                                         Patients provide intelligent online triage recommendations .</p>
                                </div>
                                <div class="swiper-slide"></div>
                            </div>
                            <!-- Add Pagination -->
                        </div>
                        <div class="next2 swiper-pagination"></div>

For example, use the second round of broadcasting ： The style prefix is the name of the newly added style

/* ! Rotation II  */
.swipertwo {
    width: 100%;
    height: 5.5rem;
    margin: .46rem auto;
    overflow: hidden;
}
.swipertwo .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    transform: scale(0.8) !important;
    transition: all .5s;
}
.swipertwo .swiper-slide:nth-child(1) {
    background-image: url(../image/zd-project01/3.png);
    background-size: 100% 100%;
}
.swipertwo .swiper-slide-active,
.swipertwo .swiper-slide-duplicate-active {
    transform: scale(1) !important;
}

.swipertwo .swiper-slide:nth-child(2n) {
    width: 5.5rem;

}

.swipertwo .swiper-slide:nth-child(3) {
    width: 5.5rem;
    background: url(../image/zd-project01/2.png);
    background-size: 100% 100%;
}

.next2{
    top: -.3rem !important;
    position: relative !important;
}

.next2 .swiper-pagination-bullet {
    width: .3rem !important;
    height: .08rem !important;
    border-radius: .04rem !important;
    margin-left: .08rem !important;
    background: #0D80DD;
}

.next2 .swiper-pagination-bullet-active {
    width: .3rem;
    height: .08rem;
    border-radius: .04rem;
    background: #0D80DD;
}

swiper.js part ： Replace the name and list items of the rotation chart to be replaced

        var swiper = new Swiper('.swiperone', {
            pagination: '.next',
            slidesPerView: 2,
            observer: true,
            observeParents: true,
            initialSlide: 1,// Default second 
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 5, observer: true,// modify swiper When you or a child element , Automatic initialization swiper
            observeParents: true,// modify swiper When the parent element of , Automatic initialization swiper
            // noSwiping: true, // Set to true Switching is prohibited when 
            slideToClickedSlide: true,
        });
        var swiper2 = new Swiper('.swipertwo', {
            pagination: '.next2',
            slidesPerView: 2,
            observer: true,
            observeParents: true,
            initialSlide: 2,// Default second 
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 5, observer: true,// modify swiper When you or a child element , Automatic initialization swiper
            observeParents: true,// modify swiper When the parent element of , Automatic initialization swiper
            // noSwiping: true, // Set to true Switching is prohibited when 
            slideToClickedSlide: true,
        });

And finally , To be in js Add the following two lines of code

observer: true,// modify swiper When you or a child element , Automatic initialization swiper
observeParents: true,// modify swiper When the parent element of , Automatic initialization swiper