news article img -> slider
This commit is contained in:
parent
9650b5b157
commit
8dd300528c
|
|
@ -0,0 +1,18 @@
|
|||
// Modules
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
|
||||
interface IProps {
|
||||
img: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const NewsArticleImg = ({ img, title }: IProps) => {
|
||||
return (
|
||||
<div className={"news-article-image"}>
|
||||
<LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
|
||||
<div className="swiper-lazy-preloader"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsArticleImg;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
// Modules
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Autoplay } from "swiper";
|
||||
|
||||
// Components
|
||||
import NewsArticleImg from "./NewsArticleImg";
|
||||
|
||||
// Images
|
||||
import Placeholder from "../../assets/images/placeholder3.png";
|
||||
|
||||
import { titlePlaceholder } from "../main/MainContent";
|
||||
|
||||
const NewsArticleSlider = () => {
|
||||
return (
|
||||
<div className="news-article-slider">
|
||||
<Swiper
|
||||
spaceBetween={24}
|
||||
slidesPerView={1}
|
||||
loop
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
modules={[Navigation, Pagination, Autoplay]}
|
||||
pagination={{
|
||||
type: "bullets",
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<NewsArticleImg img={Placeholder} title={titlePlaceholder} />
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsArticleSlider;
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
// Modules
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
|
||||
// Components
|
||||
import Aside from '../components/aside/Aside';
|
||||
import Aside from "../components/aside/Aside";
|
||||
import NewsArticleSlider from "../components/news/NewsArticleSlider";
|
||||
|
||||
// Images
|
||||
import placeholder from '../assets/images/placeholder3.png';
|
||||
import placeholder from "../assets/images/placeholder3.png";
|
||||
|
||||
// Icons
|
||||
import share from '../assets/icons/share.svg';
|
||||
import { ReactComponent as Share } from '../assets/icons/share.svg';
|
||||
import { ReactComponent as Share } from "../assets/icons/share.svg";
|
||||
|
||||
const NewsArticle = () => {
|
||||
return (
|
||||
|
|
@ -20,41 +23,47 @@ const NewsArticle = () => {
|
|||
<h3 className="news-article-date">15:23, 21 января 2023</h3>
|
||||
</div>
|
||||
<h2 className="news-article-title">
|
||||
В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на
|
||||
2023 год
|
||||
В федерации футбола Туркменистана подвели итоги прошедшего года
|
||||
и наметили курс на 2023 год
|
||||
</h2>
|
||||
</div>
|
||||
<div className="news-article-image">
|
||||
<LazyLoadImage src={placeholder} alt="image" useIntersectionObserver effect="blur" />
|
||||
<div className="news-article-slider-wrapper">
|
||||
<NewsArticleSlider />
|
||||
</div>
|
||||
<p className="news-article-text">
|
||||
Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam
|
||||
commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
|
||||
sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Vestibulum eget
|
||||
elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
|
||||
consectetur. <br />
|
||||
<br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
|
||||
Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem ipsum
|
||||
dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
|
||||
sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo mauris ac
|
||||
sodales.
|
||||
Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum
|
||||
urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor
|
||||
sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
|
||||
Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum
|
||||
urna tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor
|
||||
sit amet consectetur. <br />
|
||||
<br /> Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor
|
||||
sit amet consectetur. Vestibulum eget elementum urna tincidunt
|
||||
diam commodo mauris ac sodales. Lorem ipsum dolor sit amet
|
||||
consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
|
||||
dolor sit amet consectetur. Vestibulum eget elementum urna
|
||||
tincidunt diam commodo mauris ac sodales.
|
||||
<br />
|
||||
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna
|
||||
tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur.
|
||||
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
|
||||
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget
|
||||
elementum urna tincidunt diam commodo mauris ac sodales. Lorem
|
||||
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
|
||||
consectetur. Lorem ipsum dolor sit amet consectetur.
|
||||
<br />
|
||||
<br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem
|
||||
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
|
||||
dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo
|
||||
<br /> Vestibulum eget elementum urna tincidunt diam commodo
|
||||
mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem
|
||||
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
|
||||
consectetur. Vestibulum eget elementum urna tincidunt diam commodo
|
||||
mauris ac sodales.
|
||||
<br />
|
||||
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget elementum urna
|
||||
tincidunt diam commodo mauris ac sodales. Lorem ipsum dolor sit amet consectetur.
|
||||
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
|
||||
<br /> Lorem ipsum dolor sit amet consectetur. Vestibulum eget
|
||||
elementum urna tincidunt diam commodo mauris ac sodales. Lorem
|
||||
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
|
||||
consectetur. Lorem ipsum dolor sit amet consectetur.
|
||||
<br />
|
||||
<br /> Vestibulum eget elementum urna tincidunt diam commodo mauris ac sodales. Lorem
|
||||
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum
|
||||
dolor sit amet consectetur. Vestibulum eget elementum urna tincidunt diam commodo
|
||||
<br /> Vestibulum eget elementum urna tincidunt diam commodo
|
||||
mauris ac sodales. Lorem ipsum dolor sit amet consectetur. Lorem
|
||||
ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet
|
||||
consectetur. Vestibulum eget elementum urna tincidunt diam commodo
|
||||
mauris ac sodales.
|
||||
</p>
|
||||
<button className="share-btn">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
.news-article-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: calc(67% - 1.2rem) 1fr;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
.news-article-info {
|
||||
|
|
|
|||
Loading…
Reference in New Issue