$.wlcmPge

by mtambulut

HTML

<div class="wrapper">

    <div class="kulakcik" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
        <img src="~/Assets/images/_welcomePage/kulakcik.svg" alt="kulak" />
        <span id="expand-content">@(Model.Welcome_HoverButton_Text ?? "")</span>
        <span id="expanded-content">
        </span>
    </div>

    <div class="swiper-container-welcome" id="large-items">

            <div style="position:relative;">
                <div><a href="@item.Url"><img data-lazy="@item.Image" alt="" /></a></div>
                <section class="btn-section">
                    <div class="container">
                        <div class="showcase-btn-group d-none flex-column justify-content-center align-items-center">
                            <a href='@Url.Action("Entertainment", "Landing")' class="btn-default">
                                @(Model.TrialButtonLabel ?? "")
                                <img class="btn-icon" src="~/Assets/images/_showcase/down.png" alt="icon" />
                            </a>
                            <a class="btn btn-block button btn-showcase secondary-btn" href='@Url.Action("Index", "Landing")'>
                                @(Model.Welcome_ShowCaseButton_2_Text ?? "")
                                <img src="~/Assets/images/_showcase/down.png" alt="arrow" />
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        }
    </div>

    <div class="swiper-container-welcome" id="small-items">

        <div style="position:relative;">
            <div><a href="@item.Url"><img data-lazy="@item.Image" alt="" /></a></div>
            <section class="btn-section">
                <div class="container">
                    <div class="showcase-btn-group d-none flex-column justify-content-center align-items-center">
                        <a class="btn btn-block button purple btn-showcase" href='@Url.Action("Entertainment",...

CSS

/** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html{line-height:1.15;-webkit-text-size-adjust:100%;}/** * Remove the margin in all browsers. */body{margin:0;}/** * Render the `main` element consistently in IE. */main{display:block;}/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */h1{font-size:2em;margin:0.67em 0;}/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */hr{box-sizing:content-box;height:0;overflow:visible;}/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */pre{font-family:monospace, monospace;font-size:1em;}/** * Remove the gray background on active links in IE 10. */a{background-color:transparent;}/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}/** * Add the correct font weight in Chrome, Edge, and Safari. */b,strong{font-weight:bolder;}/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */code,kbd,samp{font-family:monospace, monospace;font-size:1em;}/** * Add the correct font size in all browsers. */small{font-size:80%;}/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}/** * Remove the border on images inside links in IE 10. */img{border-style:none;}/** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}/** * Show the overflow in IE. * 1....

JavaScript

var welcomeModel;

$(function () {
    welcomeModel = new WelcomeModel();
    welcomeModel.init();
});


var WelcomeModel = function () {
    var self = this;

    self.init = function () {

    }
}

// WELCOME KULAKCIK

var mini = true;
var expandContent = document.getElementById("expand-content");
var expandedContent = document.getElementById("expanded-content");

function toggleSidebar() {
    if (mini) {
        expandedContent.style.display = "block";
        expandContent.style.display = "none";
        this.mini = false;
    } else {
        expandedContent.style.display = "none";
        expandContent.style.display = "block";
        expandContent.style.width = "150px";
        this.mini = true;
    }
}

// WELCOME PAGE ACCORDION MENU 

let parentAcc = document.getElementById('merak-ettikleriniz__accordion');
let icon = document.getElementById('iconAcc');

let countAcc = parentAcc.childElementCount;
let accordions = parentAcc.children;

for (let i = 0; i < countAcc; i++) {
    accordions[i].addEventListener('click', () => {
        
        if (!accordions[i].classList.contains('active')) {
            $(parentAcc).find('.accordion').removeClass('active');
            console.log($(parentAcc).find('.accordion'));
            accordions[i].classList.add('active');

        } else {
            accordions[i].classList.remove('active');
            $(parentAcc).find('.accordion').removeClass('active');
        }
    });
}



$(function () {
    let pageOfWrapper = $('.swiper-container-welcome');
    pageOfWrapper.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 550,
        dots: true,
        autoplay: true,
        nextArrow: '<div class="nextArrow"><img class="slick-next" alt="" src="/Assets/images/arrow/next.svg"/></div>',
        prevArrow: '<div class="prevArrow"><img class="slick-prev" alt="" src="/Assets/images/arrow/prev.svg"/></div>',
        responsive: [
          {
              breakpoint: 769,
              settings:...