[Locked] Full screen slide using Carousel.

Report · Nov 18, 2018

Good evening. I'm looking to do a Carousel page on my website. I want to be able have the pictures cover the entire page, similar to when you add a image to the background of your website. Is this possible? And if so, what do I need to do, to make this possible?

Report · Nov 21, 2018

Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here.

Report · Nov 21, 2018

Legacys7 wrote
Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here.

Sure - you just need to strip half of the code, which is redundant in your case:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Swiper</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>
    <style>
        body {
            margin: 0;
            background-color: #000;
        }
        
        * {
            box-sizing: border-box;
        }
        
        .swiper-container {
            height: 100vh;
            width: 100vw;
            text-align: center;
        }
        
        @media screen and (max-width: 768px) {
            .swiper-slide {
                width: 100%;
            }
        }
        
        img {
            max-height: 100%;
            max-width: 100%;
        }
        
        .swiper-button-prev,
        .swiper-button-next {
            display: flex;
            justify-content: center;
            background-image: none!important;
            color: #fff;
            font-size: 35px;
            height: auto!important;
        }
        
        @media screen and (max-width: 768px) {
            .swiper-button-prev {
                top: 100px;
                background-color: #000;
                border-radius: 4px;
                padding: 0 9px 0 5px;
            }
            .swiper-button-next {
                top: 100px;
                background-color: #000;
                border-radius: 4px;
                padding: 0 5px 0 9px;
            }
        }
        
        .caption {
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?nature" alt="Nature">
                </div>
                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?food" alt="Food">
                </div>
                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?business" alt="Business">
                </div>
                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?fashion" alt="Fashion">
                </div>
                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?animal" alt="Animal">
                </div>
            </div>
            <div class="swiper-button-prev"><i class="fa fa-angle-left"></i>
            </div>
            <div class="swiper-button-next"><i class="fa fa-angle-right"></i>
            </div>
        </div>
    </div>
    <!-- end app -->
    <script>
        var mySwiper = new Swiper( '.swiper-container', {
            centeredSlides: true,
            direction: 'horizontal',
            loop: this.infinite,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        } );
    </script>
</body>

Report · Nov 21, 2018

williamj31276244 wrote
Legacys7 wrote
Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here.
Sure - you just need to strip half of the code, which is redundant in your case:

If you use the correct vue example I posted its your code that is redundant.....hummmm look at all those <div> and img

tags clogging up your code.....totally unnessary

Trying to get people to code correctly is a nigthmare in this forum....now go an use your other bloated method - Bootstrap and Wappler combination.

Report · Nov 21, 2018

The user obviously is not using vue in his project and obviously he doesn't need to include vue to just initialize the swiper with static content.

Your brain is probably too old to get this.

Report · Nov 21, 2018

williamj31276244 wrote
The user obviously is not using vue in his project and obviously he doesn't need to include vue to just initialize the swiper with static content.
Your brain is probably too old to get this.

The OP started off with a blank canvas....now youre implying Im old and yet using state of the art workflow rather than something from the past as youre suggesting using....I'll take that, maybe if you get your snout out of Wappler and Bootstrap you might learn something.

Report · Nov 21, 2018

Not going to happen. They are both highly addictive and require intensive rehab.

Report · Nov 21, 2018

williamj31276244  wrote
It's pretty well explained how to initialize it: https://idangero.us/swiper/api/#initialize 
You do not need to include a whole js framework for a pure javascript plugin, which can be initialized on load and run with static content.
You maybe don't get the idea of using front end frameworks like vue.js - it's not just including it on the page because it is trendy, especially when it does nothing on the page.
The swiper can be initialized as ANY other js function on the page....

I use vue js and that's the solution I provided. If you care to read the thread it intitially DID use a directive repeat region which can only be evoked by using vue - why would I want to include all the extra inline divs and image mark-up when its more sensible these days to make the code more steamlined, maybe something which goes above and beyond your scope of thought?

Report · Nov 20, 2018

I have the slide page working. However, the pictures that are currently in the code are linked to a http. What do I need to do, where I can add my own content in the slide show as well as make it responsive for mobile devices?

Report · Nov 19, 2018

In addition to Ben's good suggestion, our extensions work perfectly in Bootstrap pages as well as in pages made with our page layout tools. This might be interesting to you. Certainly cleaner than the majority of Bootstrap and jQuery manual plugins and fully automated in Dreamweaver:

Art Gallery Magic Demos

Art Gallery Magic: In Motion Marketing

Report · Nov 19, 2018

I like your slide demo. Very nice and clean. As I'd briefed in my post. My goal is to make it full screen. Similar to when you put a picture in your background to cover the entire page. I'll look more into what you have.

Report · Nov 19, 2018

Legacys7 wrote
I like your slide demo. Very nice and clean. As I'd briefed in my post. My goal is to make it full screen. Similar to when you put a picture in your background to cover the entire page. I'll look more into what you have.

Art Gallery has a full-screen option, which can also be invoked on page load. Full-screen can be further optioned to use a normal window or kiosk mode.

Report · Nov 19, 2018

Normal mode would be best for me. Similar to this link. NIGEL BARKER

Report · Nov 19, 2018

This is another product called Full Screen Slide Show. It is more single-purposed than Art Gallery Magic, but it might offer an easier means to achieve what you want:

PVII Full Screen Slide Show: Thumbs Driven

Report · Nov 19, 2018

Thanks everybody. I'll mark this as "correct Answer." If I have other questions, I'll chime back in.

Report · Nov 19, 2018

I agree that all the sliders presented are fully functionnal and very cool...

personnaly I really enjoy to use

or revolution slider... https://revolution.themepunch.com/ (16$)
or layer slider ... https://layerslider.kreaturamedia.com/ ... (12$)

both comes fully optionnal and not so expensive, the only limitation are then your imagination....

Report · Nov 19, 2018

Just a note, Birnou, and perhaps because I'm a stickler for quality, but both sliders you mention use some pretty rough and outdated script techniques, which clearly result in some fairly choppy animations. In your native language, I believe the word is gauche? And, of course, neither possess visual UIs that install into Dreamweaver or free telephone support. Just trying to put it all on the table...

Report · Nov 19, 2018

I understand your quality prerogatives which are to your credit... well these plugins have never caused me any problems, nor to the site of my customers on which they are present.... there has never been a negative feedback from end users. on the contrary, all are admiring and amazed

the two development teams (layer and slider) are very reactive and are constantly listening to users.

as far as I'm concerned, I always buy plug-ins and templates from the envato platform (themeforest or canyon code) because it's a guarantee of security / quality

the online support is really effective there (for example) https://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin/1362246/support ... it is a commitment to be able to sell from this platform

their reaction time (depending on the time difference) is almost instantaneous....

I have been using their services for several years now, because they provide animations of very beautiful aesthetics, fully customizable, full of possibilities (it is unimaginable everything that can be done)... it is fully responsive and optimized in terms of loading image distribution (retina, mobile, large, tv...) animations support video, interaction, complex animations and 2D/3D effects...

in short, I admit that they are gas factory plugins... and their configuration interface is very intuitive, very complete and WYSIWYG in real time

in short... I don't get tired of it, nor do my customers... but I understand that some people may not enjoy... and please it only cost 12$ !!!

Report · Nov 19, 2018

Um, all I was saying is the animations are rough. It's not an opinion, it simply is. Tool bad you do not promote Dreamweaver plugins - of course, only the good ones. This used to be a community dedicated to Dreamweaver. Please don't bother responding. There is no need.

Report · Nov 19, 2018

Sorry to have hit you, it wasn't my intention.

Report · Nov 20, 2018

https://forums.adobe.com/people/B+i+r+n+o+u wrote
Sorry to have hit you, it wasn't my intention.

You didn't hit me. You just surprised me with your recommendations. DMX Zone bases a lot of its client-side extensions on open source plugins, but they tend to tweak the scripts with stubs that optimize things. In a way, you can call that quality control. We write our own scripts, and also employ a high level of quality control to smooth animations and ensure a stable page. There are even decent jQuery plugins, but you've got to really analyze them. The recommendations you made are not very well written and the animations are choppy. This is not a subjective issue. It is simply a measurable facet of those tools. I'm just very surprised that you would recommend something so rough.

Report · Nov 20, 2018

Too right, l wonder how many extension users even bother to open the js files to see the credits and exactly what they are buying into.

Report · Nov 20, 2018

Too few.

Report · Nov 21, 2018

Yes, true. At least, unlike your small company, they both have more than your 15 users (who managed to evolve to CS6) and don't seem to need hijacking every single topic here to advertise themselves.

Report · Nov 21, 2018

Ah, mister rounded corners. I would rather have a small company that provides for my needs, than a small mind. Just saying... so please do not take offense.

Report · Nov 21, 2018

Maybe stop hijacking every topic with your ad attempts then and take care of your own users who adore your 1999-like designs.

We don't need anybody telling us not to use masonry grid when we need masonry grid and also we don't need anybody telling us not to use foundation or bootstrap when we want to use them.

If we need your opinion we will ask you.

Adobe Community

[Locked] Full screen slide using Carousel.