3D Cube Image Slider using HTML & CSS (2021 Update)

Live Demo

Source Code

What is GEEK

Buddha Community

How to Automatic Image Slider in Html, CSS and Javascript

In this article, you will learn how to create an automatic image slider using HTML CSS, and JavaScript code. Earlier I shared with you many more types of manual and automatic image sliders. Like other designs, I hope you like this design.

Image slider is a common web element that is currently used in many websites. It is mainly used for the slideshow on the website’s homepage. This type of Auto Image Slideshow is also used to organize many images in a gallery. If you want to learn more about javascript, check out my best HTML, CSS, and javascript projects.

There are two types of image sliders, one automatic and the other manual. In the case of the automatic image slider, the image will change automatically at regular intervals. In the case of the manual, you need to change the image using the Next and Previous buttons.

Automatic Image Slider

In this case, the image can be changed automatically and manually. This means that it will automatically change the image and you can also change the image using the Next and Previs buttons separately.

 The design can only be created with the help of HTML and CSS but in this case, I have used JavaScript programming code.

If you want to know how these automatic image slideshows work then you can watch the live demo below. Below I have given the source code so you can copy them if you want. You can also download the code using the download button at the bottom of the article.

As you can see in the demo above, this is a very simple image slider with automatic and manual image changes.

In this case, I have used a total of five images but you can use many more if you want. The image will change automatically every 5 seconds. There are also two buttons to change the image.

Automatic Image Slider in Html, CSS, and Javascript

If you know basic HTML CSS and JavaScript then you can easily understand this design. To create this automatic image slider, first, you need to create an HTML and CSS file.

In this case, I did not create a separate JavaScript file, but you can create a separate file if you want.

Step 1: Create the basic structure of the slider

I have used a little HTML and CSS code below to create the background of this slider. In this case, I have used the slider height 256 px and width 500 px.

I didn’t use any different colors in the background. If you have seen the demo, you will understand that a shadow has been used around this slide for which I have used box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) here.

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

Step 2: Add the required images

I have added images to this Automatic Image Slider using the code below and designed those images. I have used a total of five images you can increase or decrease as you wish.

If you take a closer look at the CSS code below, you will understand that I have used Slider Ul Width 10000%.

You may wonder why I used 10,000% here. Take a good look at the image below to understand why and how this slider works.

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 In this case, the height of the image is 256 px and the width is 500 px. Of course in this case you will use the same size of each image.

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

Step 3: Add prev and next button

Now we will add the Previs and Next buttons to this slider. The HTML and CSS code below helped to add and design these two buttons.

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

Step 4: Determine the exact location of the two buttons

 I have used a little CSS below to place these two buttons in their proper place. I kept the Previs button 10 pixels away from the left.

I kept the next button 10 px away from the right. As a result, these two buttons are located on either side of the slider.

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

I have used the following CSS code to use a small amount of hover effect in the background of these two buttons.

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}

Step 5: Activate the image slider by adding JavaScript code

So far we have only designed it, now we will implement the image change of this slider.

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

First of all, we will decide in advance what kind of work will be done by clicking on the Next button. If you are a beginner then first of all look at the code structure below. Then follow the explanation below which will help you understand better.

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};

As we have seen, in the nextSlide variable, we have stored how the Next button will work.
First, we added value if (count <items) this code will work when the amount of image is more than count.

Using else if (count = items) we have determined what will happen if the previous function does not work. If both the image and the count are equal then there will be no change in the slider.

 ‘count’ is the number of times you clicked on the button. If you click on that button once, the value of the count is one. If you click three times at once, the value of the account is 3.

We have decided what kind of change will happen if we click on the Next button. Now we will implement the previous button.

Similarly here we have determined what kind of effect will work if you click on the previous button.

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};

Determining what kind of effect will work when clicking the previous and Next buttons in this Automatic Image Slider. Now we will associate those effects with two buttons.

As I said earlier, we have stored how the Next button will work in a constant called ‘next Slider’. Now below we have instructed that if you click on the Next button, that constant will work.

next.addEventListener(“click”, function() {
  nextSlide();
});

We’ve saved what works on the previous button in the ‘prevSlide’. Now below we have instructed that if you click on the previous button, that constant will work.

prev.addEventListener(“click”, function() {
  prevSlide();
});

Since this is an automatic image slider, in this case, I have arranged for the image to change automatically. Here I have used 5000 i.e. 5 seconds. This means the image will change every 5 seconds. If you want the images to change every 2 seconds, use 2000 instead of 5000 here.

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}

Hope you learned from this tutorial how I created this beautiful automatic image slider using HTML CSS and JavaScript code. If you want to download the required source code, you can use the download button below.

If you have any problem understanding how to make this auto image slider then you can definitely let me know by commenting.

Original article source at: https://foolishdeveloper.com/

#javascript #image #slider #html #css 

如何在 Html、CSS 和 Javascript 中使用自动图像滑块

在本文中，您将学习如何使用 HTML CSS 和 JavaScript 代码创建自动图像滑块。早些时候，我与您分享了更多类型的手动和自动图像滑块。和其他设计一样，我希望你喜欢这个设计。

图像滑块是一种常见的网络元素，目前在许多网站中使用。主要用于网站首页的幻灯片放映。这种类型的自动图像幻灯片还用于组织图库中的许多图像。如果您想了解有关 javascript 的更多信息，请查看我最好的HTML、CSS 和 javascript 项目。

有两种类型的图像滑块，一种是自动的，另一种是手动的。在自动图像滑块的情况下，图像将定期自动更改。对于手册，您需要使用“下一个”和“上一个”按钮更改图像。

自动图像滑块

在这种情况下，可以自动和手动更改图像。这意味着它会自动更改图像，您也可以 分别使用 Next 和 Previs 按钮更改图像 。

 该设计只能在 HTML 和 CSS 的帮助下创建，但在这种情况下，我使用了 JavaScript 编程代码。

如果你想知道这些自动图像幻灯片是如何工作的，那么你可以观看下面的现场演示。下面我给出了源代码，所以你可以根据需要复制它们。您还可以使用文章底部的下载按钮下载代码。

正如您在上面的演示中看到的，这是一个非常简单的图像滑块，具有自动和手动图像更改功能。

在本例中，我总共使用了五张图片，但如果你愿意，你可以使用更多图片。图像将每 5 秒自动更改一次。还有两个按钮可以更改图像。

Html、CSS 和 Javascript 中的自动图像滑块

如果您了解基本的 HTML CSS 和 JavaScript，那么您可以轻松理解此设计。要创建这个自动图像滑块，首先，您需要创建一个 HTML 和 CSS 文件。

在本例中，我没有创建单独的 JavaScript 文件，但如果需要，您可以创建一个单独的文件。

第 1 步：创建滑块的基本结构

我在下面使用了一些 HTML 和 CSS 代码来创建这个滑块的背景。在本例中，我使用的滑块高度为 256 像素，宽度为 500 像素。

我没有在背景中使用任何不同的颜色。如果你看过演示，你就会明白这张幻灯片周围使用了阴影，我在这里使用了 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3)。

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

第 2 步：添加所需的图像

我使用下面的代码向这个自动图像滑块添加了图像并设计了这些图像。我一共使用了五张图片，你可以随意增减。

如果你仔细看看下面的 CSS 代码，你就会明白我使用了 Slider Ul Width 10000%。

你可能想知道为什么我在这里使用 10,000%。仔细查看下图，了解此滑块工作的原因和方式。

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 在本例中，图像的高度为 256 像素，宽度为 500 像素。当然，在这种情况下，您将使用相同大小的每个图像。

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

第三步：添加上一个和下一个按钮

现在我们将 Previs 和 Next 按钮添加到此滑块。下面的 HTML 和 CSS 代码有助于添加和设计这两个按钮。

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

第四步：确定两个按钮的准确位置

 我在下面使用了一些 CSS 将这两个按钮放在适当的位置。我将 Previs 按钮保持在距左侧 10 像素的位置。

我将下一个按钮保持在距离右侧 10 px 的位置。因此，这两个按钮位于滑块的两侧。

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

我使用下面的 CSS 代码在这两个按钮的背景中使用了少量悬停效果。

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}

第 5 步：通过添加 JavaScript 代码激活图像滑块

到目前为止我们只是设计了它，现在我们来实现这个滑块的图像变化。

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

首先，我们将通过单击“下一步”按钮来提前决定要完成什么样的工作。如果您是初学者，那么首先请看下面的代码结构。然后按照下面的说明进行操作，这将帮助您更好地理解。

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};

正如我们所见，在 nextSlide 变量中，我们存储了 Next 按钮的工作方式。
首先，我们添加了 value if (count <items) 此代码将在图像数量超过 count 时起作用。

使用 else if (count = items) 我们已经确定了如果前面的函数不起作用会发生什么。如果图像和计数都相等，则滑块不会发生变化。

 'count' 是您点击按钮的次数。如果您单击该按钮一次，则计数值为一。如果一次单击三次，则该帐户的值为 3。

我们已经决定了如果我们点击 Next 按钮将会发生什么样的变化。现在我们将实现上一个按钮。

类似地，我们已经确定了如果您单击上一个按钮会产生什么样的效果。

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};

确定单击此自动图像滑块中的上一个和下一个按钮时将产生何种效果。现在我们将这些效果与两个按钮相关联。

正如我之前所说，我们已经将 Next 按钮的工作方式存储在名为“next Slider”的常量中。下面我们已经指示如果您单击“下一步”按钮，该常量将起作用。

next.addEventListener(“click”, function() {
  nextSlide();
});

我们已经在“prevSlide”中保存了对上一个按钮起作用的内容。下面我们已经说明，如果您单击上一个按钮，该常量将起作用。

prev.addEventListener(“click”, function() {
  prevSlide();
});

由于这是一个自动图像滑块，在这种情况下，我已安排图像自动更改。这里我使用了 5000 即 5 秒。这意味着图像将每 5 秒更改一次。如果您希望图像每 2 秒更改一次，请在此处使用 2000 而不是 5000。

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}

希望您从本教程中了解到我是如何使用 HTML CSS 和 JavaScript 代码创建这个漂亮的自动图像滑块的。如果您想下载所需的源代码，可以使用下面的下载按钮。

如果您对如何制作此自动图像滑块有任何疑问，那么您绝对可以通过评论让我知道。

文章原文出处：https: //foolishdeveloper.com/

#javascript #image #slider #html #css 

Как сделать автоматический слайдер изображений в Html, CSS, Javascript

В этой статье вы узнаете, как создать автоматический слайдер изображений с помощью HTML CSS и кода JavaScript. Ранее я поделился с вами еще многими типами ручных и автоматических слайдеров изображений . Как и другие проекты, я надеюсь, вам понравится этот дизайн.

Слайдер изображений — это распространенный веб-элемент, который в настоящее время используется на многих веб-сайтах. Он в основном используется для слайд-шоу на главной странице сайта. Этот тип автоматического слайд-шоу изображений также используется для организации большого количества изображений в галерее. Если вы хотите узнать больше о javascript, ознакомьтесь с моими лучшими проектами HTML, CSS и javascript .

Существует два типа ползунков изображений: автоматический и ручной. В случае автоматического ползунка изображения изображение будет автоматически меняться через равные промежутки времени. В случае с мануалом менять изображение нужно с помощью кнопок Next и Previous.

Автоматический слайдер изображений

При этом изображение можно менять автоматически и вручную. Это означает, что он автоматически изменит изображение, и вы также можете  изменить изображение, используя кнопки «Далее» и «Предварительный просмотр»  по отдельности.

 Дизайн можно создать только с помощью HTML и CSS, но в данном случае я использовал программный код JavaScript.

Если вы хотите узнать, как работают эти автоматические слайд-шоу изображений , вы можете посмотреть живую демонстрацию ниже. Ниже я дал исходный код, так что вы можете скопировать их, если хотите. Вы также можете скачать код с помощью кнопки загрузки внизу статьи.

Как вы можете видеть в демо выше, это очень простой слайдер изображений с автоматической и ручной сменой изображений.

В этом случае я использовал в общей сложности пять изображений, но вы можете использовать гораздо больше, если хотите. Изображение будет меняться автоматически каждые 5 секунд. Также есть две кнопки для смены изображения.

Автоматический слайдер изображений в HTML, CSS и Javascript

Если вы знаете основы HTML, CSS и JavaScript, вы легко разберетесь в этом дизайне. Чтобы создать этот автоматический слайдер изображений, сначала вам нужно создать файл HTML и CSS.

В данном случае я не создавал отдельный файл JavaScript, но вы можете создать отдельный файл, если хотите.

Шаг 1: Создайте базовую структуру слайдера

Я использовал небольшой код HTML и CSS ниже, чтобы создать фон для этого слайдера. В этом случае я использовал ползунок высотой 256 пикселей и шириной 500 пикселей.

Я не использовал разные цвета фона. Если вы видели демонстрацию, вы поймете, что вокруг этого слайда была использована тень, для которой я использовал box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) здесь.

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

Шаг 2: Добавьте необходимые изображения

Я добавил изображения в этот автоматический слайдер изображений, используя приведенный ниже код, и разработал эти изображения. Я использовал в общей сложности пять изображений, которые вы можете увеличивать или уменьшать по своему усмотрению.

Если вы внимательно посмотрите на приведенный ниже код CSS, вы поймете, что я использовал Slider Ul Width 10000%.

Вы можете задаться вопросом, почему я использовал здесь 10 000%. Внимательно посмотрите на изображение ниже, чтобы понять, почему и как работает этот ползунок.

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 В этом случае высота изображения составляет 256 пикселей, а ширина — 500 пикселей. Конечно, в этом случае вы будете использовать одинаковый размер каждого изображения.

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

Шаг 3. Добавьте кнопки «Предыдущая» и «Далее»

Теперь мы добавим к этому слайдеру кнопки Previs и Next. Приведенный ниже код HTML и CSS помог добавить и спроектировать эти две кнопки.

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

Шаг 4: Определите точное расположение двух кнопок

 Я использовал небольшой CSS ниже, чтобы разместить эти две кнопки на своих местах. Я оставил кнопку «Предварительный просмотр» на расстоянии 10 пикселей от левого края.

Я оставил следующую кнопку на расстоянии 10 пикселей от правого края. В результате эти две кнопки расположены по обе стороны от ползунка.

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

Я использовал следующий код CSS, чтобы использовать небольшой эффект наведения на фоне этих двух кнопок.

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}

Шаг 5. Активируйте ползунок изображения, добавив код JavaScript.

Пока мы его только оформили, теперь реализуем смену изображения этого слайдера.

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

Прежде всего, мы заранее определимся, какая работа будет выполнена, нажав на кнопку «Далее». Если вы новичок, то прежде всего посмотрите на структуру кода ниже. Затем следуйте приведенным ниже объяснениям, которые помогут вам лучше понять.

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};

Как мы видели, в переменной nextSlide мы сохранили, как будет работать кнопка «Далее».
Во-первых, мы добавили значение if (count <items), этот код будет работать, когда количество изображений больше, чем count.

С помощью else if (count = items) мы определили, что произойдет, если предыдущая функция не сработает. Если и изображение, и количество одинаковы, то слайдер не изменится.

 'count' - это количество раз, когда вы нажали на кнопку. Если вы нажмете на эту кнопку один раз, значение счетчика будет равно единице. Если вы нажмете три раза одновременно, значение учетной записи равно 3.

Мы решили, какие изменения произойдут, если мы нажмем кнопку «Далее». Теперь мы реализуем предыдущую кнопку.

Точно так же здесь мы определили, какой эффект будет работать, если вы нажмете на предыдущую кнопку.

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};

Определение того, какой эффект будет работать при нажатии кнопок «Назад» и «Далее» в этом автоматическом слайдере изображений. Теперь мы свяжем эти эффекты с двумя кнопками.

Как я уже говорил ранее, мы сохранили то, как кнопка «Далее» будет работать, в константе под названием «следующий слайдер». Теперь ниже мы указали, что если вы нажмете кнопку «Далее», эта константа будет работать.

next.addEventListener(“click”, function() {
  nextSlide();
});

Мы сохранили то, что работает на предыдущей кнопке, в «prevSlide». Теперь ниже мы указали, что если вы нажмете на предыдущую кнопку, эта константа будет работать.

prev.addEventListener(“click”, function() {
  prevSlide();
});

Поскольку это автоматический слайдер изображений , в данном случае я устроил автоматическое изменение изображения. Здесь я использовал 5000 т.е. 5 секунд. Это означает, что изображение будет меняться каждые 5 секунд. Если вы хотите, чтобы изображения менялись каждые 2 секунды, используйте здесь 2000 вместо 5000.

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}

Надеюсь, вы узнали из этого урока, как я создал этот красивый автоматический слайдер изображений , используя код HTML CSS и JavaScript. Если вы хотите загрузить необходимый исходный код, вы можете использовать кнопку загрузки ниже.

Если у вас есть какие-либо проблемы с пониманием того, как сделать этот автоматический слайдер изображений, вы обязательно можете сообщить мне об этом в комментариях.

Original article source at:  https://foolishdeveloper.com/

#javascript #image #slider #html #css 

EasyMDE: Simple, Beautiful and Embeddable JavaScript Markdown Editor

EasyMDE - Markdown Editor 

This repository is a fork of SimpleMDE, made by Sparksuite. Go to the dedicated section for more information.

A drop-in JavaScript text area replacement for writing beautiful and understandable Markdown. EasyMDE allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts.

In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc.

EasyMDE also features both built-in auto saving and spell checking. The editor is entirely customizable, from theming to toolbar buttons and javascript hooks.

Try the demo

Quick access

• EasyMDE - Markdown Editor
  • Quick access
  • Install EasyMDE
  • How to use
    • Loading the editor
    • Editor functions
  • Configuration
    • Options list
    • Options example
    • Toolbar icons
    • Toolbar customization
    • Keyboard shortcuts
  • Advanced use
    • Event handling
    • Removing EasyMDE from text area
    • Useful methods
  • How it works
  • SimpleMDE fork
  • Hacking EasyMDE
  • Contributing
  • License

Install EasyMDE

Via npm:

npm install easymde

Via the UNPKG CDN:

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

Or jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>

How to use

Loading the editor

After installing and/or importing the module, you can load EasyMDE onto the first textarea element on the web page:

<textarea></textarea>
<script>
const easyMDE = new EasyMDE();
</script>

Alternatively you can select a specific textarea, via JavaScript:

<textarea id="my-text-area"></textarea>
<script>
const easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>

Editor functions

Use easyMDE.value() to get the content of the editor:

<script>
easyMDE.value();
</script>

Use easyMDE.value(val) to set the content of the editor:

<script>
easyMDE.value('New input for **EasyMDE**');
</script>

Configuration

Options list

• autoDownloadFontAwesome: If set to true, force downloads Font Awesome (used for icons). If set to false, prevents downloading. Defaults to undefined, which will intelligently check whether Font Awesome has already been included, then download accordingly.
• autofocus: If set to true, focuses the editor automatically. Defaults to false.
• autosave: Saves the text that's being written and will load it back in the future. It will forget the text when the form it's contained in is submitted.
  • enabled: If set to true, saves the text automatically. Defaults to false.
  • delay: Delay between saves, in milliseconds. Defaults to 10000 (10 seconds).
  • submit_delay: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to autosave.delay or 10000 (10 seconds).
  • uniqueId: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
  • timeFormat: Set DateTimeFormat. More information see DateTimeFormat instances. Default locale: en-US, format: hour:minute.
  • text: Set text for autosave.
• autoRefresh: Useful, when initializing the editor in a hidden DOM node. If set to { delay: 300 }, it will check every 300 ms if the editor is visible and if positive, call CodeMirror's refresh().
• blockStyles: Customize how certain buttons that style blocks of text behave.
  • bold: Can be set to ** or __. Defaults to **.
  • code: Can be set to ``` or ~~~. Defaults to ```.
  • italic: Can be set to * or _. Defaults to *.
• unorderedListStyle: can be *, - or +. Defaults to *.
• scrollbarStyle: Chooses a scrollbar implementation. The default is "native", showing native scrollbars. The core library also provides the "null" style, which completely hides the scrollbars. Addons can implement additional scrollbar models.
• element: The DOM element for the textarea element to use. Defaults to the first textarea element on the page.
• forceSync: If set to true, force text changes made in EasyMDE to be immediately stored in original text area. Defaults to false.
• hideIcons: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
• indentWithTabs: If set to false, indent using spaces instead of tabs. Defaults to true.
• initialValue: If set, will customize the initial value of the editor.
• previewImagesInEditor: - EasyMDE will show preview of images, false by default, preview for images will appear only for images on separate lines.
• imagesPreviewHandler: - A custom function for handling the preview of images. Takes the parsed string between the parantheses of the image markdown ![]( ) as argument and returns a string that serves as the src attribute of the <img> tag in the preview. Enables dynamic previewing of images in the frontend without having to upload them to a server, allows copy-pasting of images to the editor with preview.
• insertTexts: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: ["[", "](http://)"].
  • horizontalRule
  • image
  • link
  • table
• lineNumbers: If set to true, enables line numbers in the editor.
• lineWrapping: If set to false, disable line wrapping. Defaults to true.
• minHeight: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like "500px". Defaults to "300px".
• maxHeight: Sets fixed height for the composition area. minHeight option will be ignored. Should be a string containing a valid CSS value like "500px". Defaults to undefined.
• onToggleFullScreen: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, true when the editor is currently going into full screen mode, or false.
• parsingConfig: Adjust settings for parsing the Markdown during editing (not previewing).
  • allowAtxHeaderWithoutSpace: If set to true, will render headers without a space after the #. Defaults to false.
  • strikethrough: If set to false, will not process GFM strikethrough syntax. Defaults to true.
  • underscoresBreakWords: If set to true, let underscores be a delimiter for separating words. Defaults to false.
• overlayMode: Pass a custom codemirror overlay mode to parse and style the Markdown during editing.
  • mode: A codemirror mode object.
  • combine: If set to false, will replace CSS classes returned by the default Markdown mode. Otherwise the classes returned by the custom mode will be combined with the classes returned by the default mode. Defaults to true.
• placeholder: If set, displays a custom placeholder message.
• previewClass: A string or array of strings that will be applied to the preview screen when activated. Defaults to "editor-preview".
• previewRender: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
• promptURLs: If set to true, a JS alert window appears asking for the link or image URL. Defaults to false.
• promptTexts: Customize the text used to prompt for URLs.
  • image: The text to use when prompting for an image's URL. Defaults to URL of the image:.
  • link: The text to use when prompting for a link's URL. Defaults to URL for the link:.
• uploadImage: If set to true, enables the image upload functionality, which can be triggered by drag and drop, copy-paste and through the browse-file window (opened when the user click on the upload-image icon). Defaults to false.
• imageMaxSize: Maximum image size in bytes, checked before upload (note: never trust client, always check the image size at server-side). Defaults to 1024 * 1024 * 2 (2 MB).
• imageAccept: A comma-separated list of mime-types used to check image type before upload (note: never trust client, always check file types at server-side). Defaults to image/png, image/jpeg.
• imageUploadFunction: A custom function for handling the image upload. Using this function will render the options imageMaxSize, imageAccept, imageUploadEndpoint and imageCSRFToken ineffective.
  • The function gets a file and onSuccess and onError callback functions as parameters. onSuccess(imageUrl: string) and onError(errorMessage: string)
• imageUploadEndpoint: The endpoint where the images data will be sent, via an asynchronous POST request. The server is supposed to save this image, and return a JSON response.
  • if the request was successfully processed (HTTP 200 OK): {"data": {"filePath": "<filePath>"}} where filePath is the path of the image (absolute if imagePathAbsolute is set to true, relative if otherwise);
  • otherwise: {"error": "<errorCode>"}, where errorCode can be noFileGiven (HTTP 400 Bad Request), typeNotAllowed (HTTP 415 Unsupported Media Type), fileTooLarge (HTTP 413 Payload Too Large) or importError (see errorMessages below). If errorCode is not one of the errorMessages, it is alerted unchanged to the user. This allows for server-side error messages. No default value.
• imagePathAbsolute: If set to true, will treat imageUrl from imageUploadFunction and filePath returned from imageUploadEndpoint as an absolute rather than relative path, i.e. not prepend window.location.origin to it.
• imageCSRFToken: CSRF token to include with AJAX call to upload image. For various instances like Django, Spring and Laravel.
• imageCSRFName: CSRF token filed name to include with AJAX call to upload image, applied when imageCSRFToken has value, defaults to csrfmiddlewaretoken.
• imageCSRFHeader: If set to true, passing CSRF token via header. Defaults to false, which pass CSRF through request body.
• imageTexts: Texts displayed to the user (mainly on the status bar) for the import image feature, where #image_name#, #image_size# and #image_max_size# will replaced by their respective values, that can be used for customization or internationalization:
  • sbInit: Status message displayed initially if uploadImage is set to true. Defaults to Attach files by drag and dropping or pasting from clipboard..
  • sbOnDragEnter: Status message displayed when the user drags a file to the text area. Defaults to Drop image to upload it..
  • sbOnDrop: Status message displayed when the user drops a file in the text area. Defaults to Uploading images #images_names#.
  • sbProgress: Status message displayed to show uploading progress. Defaults to Uploading #file_name#: #progress#%.
  • sbOnUploaded: Status message displayed when the image has been uploaded. Defaults to Uploaded #image_name#.
  • sizeUnits: A comma-separated list of units used to display messages with human-readable file sizes. Defaults to B, KB, MB (example: 218 KB). You can use B,KB,MB instead if you prefer without whitespaces (218KB).
• errorMessages: Errors displayed to the user, using the errorCallback option, where #image_name#, #image_size# and #image_max_size# will replaced by their respective values, that can be used for customization or internationalization:
  • noFileGiven: The server did not receive any file from the user. Defaults to You must select a file..
  • typeNotAllowed: The user send a file type which doesn't match the imageAccept list, or the server returned this error code. Defaults to This image type is not allowed..
  • fileTooLarge: The size of the image being imported is bigger than the imageMaxSize, or if the server returned this error code. Defaults to Image #image_name# is too big (#image_size#).\nMaximum file size is #image_max_size#..
  • importError: An unexpected error occurred when uploading the image. Defaults to Something went wrong when uploading the image #image_name#..
• errorCallback: A callback function used to define how to display an error message. Defaults to (errorMessage) => alert(errorMessage).
• renderingConfig: Adjust settings for parsing the Markdown during previewing (not editing).
  • codeSyntaxHighlighting: If set to true, will highlight using highlight.js. Defaults to false. To use this feature you must include highlight.js on your page or pass in using the hljs option. For example, include the script and the CSS files like:
    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
  • hljs: An injectible instance of highlight.js. If you don't want to rely on the global namespace (window.hljs), you can provide an instance here. Defaults to undefined.
  • markedOptions: Set the internal Markdown renderer's options. Other renderingConfig options will take precedence.
  • singleLineBreaks: If set to false, disable parsing GitHub Flavored Markdown (GFM) single line breaks. Defaults to true.
  • sanitizerFunction: Custom function for sanitizing the HTML output of Markdown renderer.
• shortcuts: Keyboard shortcuts associated with this instance. Defaults to the array of shortcuts.
• showIcons: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
• spellChecker: If set to false, disable the spell checker. Defaults to true. Optionally pass a CodeMirrorSpellChecker-compliant function.
• inputStyle: textarea or contenteditable. Defaults to textarea for desktop and contenteditable for mobile. contenteditable option is necessary to enable nativeSpellcheck.
• nativeSpellcheck: If set to false, disable native spell checker. Defaults to true.
• sideBySideFullscreen: If set to false, allows side-by-side editing without going into fullscreen. Defaults to true.
• status: If set to false, hide the status bar. Defaults to the array of built-in status bar items.
  • Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
• styleSelectedText: If set to false, remove the CodeMirror-selectedtext class from selected lines. Defaults to true.
• syncSideBySidePreviewScroll: If set to false, disable syncing scroll in side by side mode. Defaults to true.
• tabSize: If set, customize the tab size. Defaults to 2.
• theme: Override the theme. Defaults to easymde.
• toolbar: If set to false, hide the toolbar. Defaults to the array of icons.
• toolbarTips: If set to false, disable toolbar button tips. Defaults to true.
• direction: rtl or ltr. Changes text direction to support right-to-left languages. Defaults to ltr.

Options example

Most options demonstrate the non-default behavior:

const editor = new EasyMDE({
    autofocus: true,
    autosave: {
        enabled: true,
        uniqueId: "MyUniqueID",
        delay: 1000,
        submit_delay: 5000,
        timeFormat: {
            locale: 'en-US',
            format: {
                year: 'numeric',
                month: 'long',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
            },
        },
        text: "Autosaved: "
    },
    blockStyles: {
        bold: "__",
        italic: "_",
    },
    unorderedListStyle: "-",
    element: document.getElementById("MyID"),
    forceSync: true,
    hideIcons: ["guide", "heading"],
    indentWithTabs: false,
    initialValue: "Hello world!",
    insertTexts: {
        horizontalRule: ["", "\n\n-----\n\n"],
        image: ["![](http://", ")"],
        link: ["[", "](https://)"],
        table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n"],
    },
    lineWrapping: false,
    minHeight: "500px",
    parsingConfig: {
        allowAtxHeaderWithoutSpace: true,
        strikethrough: false,
        underscoresBreakWords: true,
    },
    placeholder: "Type here...",

    previewClass: "my-custom-styling",
    previewClass: ["my-custom-styling", "more-custom-styling"],

    previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
    previewRender: (plainText, preview) => { // Async method
        setTimeout(() => {
            preview.innerHTML = customMarkdownParser(plainText);
        }, 250);

        return "Loading...";
    },
    promptURLs: true,
    promptTexts: {
        image: "Custom prompt for URL:",
        link: "Custom prompt for URL:",
    },
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: true,
        sanitizerFunction: (renderedHTML) => {
            // Using DOMPurify and only allowing <b> tags
            return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
        },
    },
    shortcuts: {
        drawTable: "Cmd-Alt-T"
    },
    showIcons: ["code", "table"],
    spellChecker: false,
    status: false,
    status: ["autosave", "lines", "words", "cursor"], // Optional usage
    status: ["autosave", "lines", "words", "cursor", {
        className: "keystrokes",
        defaultValue: (el) => {
            el.setAttribute('data-keystrokes', 0);
        },
        onUpdate: (el) => {
            const keystrokes = Number(el.getAttribute('data-keystrokes')) + 1;
            el.innerHTML = `${keystrokes} Keystrokes`;
            el.setAttribute('data-keystrokes', keystrokes);
        },
    }], // Another optional usage, with a custom status bar item that counts keystrokes
    styleSelectedText: false,
    sideBySideFullscreen: false,
    syncSideBySidePreviewScroll: false,
    tabSize: 4,
    toolbar: false,
    toolbarTips: false,
});

Toolbar icons

Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JavaScript. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the title="" attribute. Note that shortcut hints are added automatically and reflect the specified action if it has a key bind assigned to it (i.e. with the value of action set to bold and that of tooltip set to Bold, the final text the user will see would be "Bold (Ctrl-B)").

Additionally, you can add a separator between any icons by adding "|" to the toolbar array.

Name	Action	Tooltip Class
bold	toggleBold	Bold fa fa-bold
italic	toggleItalic	Italic fa fa-italic
strikethrough	toggleStrikethrough	Strikethrough fa fa-strikethrough
heading	toggleHeadingSmaller	Heading fa fa-header
heading-smaller	toggleHeadingSmaller	Smaller Heading fa fa-header
heading-bigger	toggleHeadingBigger	Bigger Heading fa fa-lg fa-header
heading-1	toggleHeading1	Big Heading fa fa-header header-1
heading-2	toggleHeading2	Medium Heading fa fa-header header-2
heading-3	toggleHeading3	Small Heading fa fa-header header-3
code	toggleCodeBlock	Code fa fa-code
quote	toggleBlockquote	Quote fa fa-quote-left
unordered-list	toggleUnorderedList	Generic List fa fa-list-ul
ordered-list	toggleOrderedList	Numbered List fa fa-list-ol
clean-block	cleanBlock	Clean block fa fa-eraser
link	drawLink	Create Link fa fa-link
image	drawImage	Insert Image fa fa-picture-o
table	drawTable	Insert Table fa fa-table
horizontal-rule	drawHorizontalRule	Insert Horizontal Line fa fa-minus
preview	togglePreview	Toggle Preview fa fa-eye no-disable
side-by-side	toggleSideBySide	Toggle Side by Side fa fa-columns no-disable no-mobile
fullscreen	toggleFullScreen	Toggle Fullscreen fa fa-arrows-alt no-disable no-mobile
guide	This link	Markdown Guide fa fa-question-circle
undo	undo	Undo fa fa-undo
redo	redo	Redo fa fa-redo

Toolbar customization

Customize the toolbar using the toolbar option.

Only the order of existing buttons:

const easyMDE = new EasyMDE({
    toolbar: ["bold", "italic", "heading", "|", "quote"]
});

All information and/or add your own icons

const easyMDE = new EasyMDE({
    toolbar: [
        {
            name: "bold",
            action: EasyMDE.toggleBold,
            className: "fa fa-bold",
            title: "Bold",
        },
        "italics", // shortcut to pre-made button
        {
            name: "custom",
            action: (editor) => {
                // Add your own code
            },
            className: "fa fa-star",
            title: "Custom Button",
            attributes: { // for custom attributes
                id: "custom-id",
                "data-value": "custom value" // HTML5 data-* attributes need to be enclosed in quotation marks ("") because of the dash (-) in its name.
            }
        },
        "|" // Separator
        // [, ...]
    ]
});

Put some buttons on dropdown menu

const easyMDE = new EasyMDE({
    toolbar: [{
                name: "heading",
                action: EasyMDE.toggleHeadingSmaller,
                className: "fa fa-header",
                title: "Headers",
            },
            "|",
            {
                name: "others",
                className: "fa fa-blind",
                title: "others buttons",
                children: [
                    {
                        name: "image",
                        action: EasyMDE.drawImage,
                        className: "fa fa-picture-o",
                        title: "Image",
                    },
                    {
                        name: "quote",
                        action: EasyMDE.toggleBlockquote,
                        className: "fa fa-percent",
                        title: "Quote",
                    },
                    {
                        name: "link",
                        action: EasyMDE.drawLink,
                        className: "fa fa-link",
                        title: "Link",
                    }
                ]
            },
        // [, ...]
    ]
});

Keyboard shortcuts

EasyMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. The list of default ones is as follows:

Shortcut (Windows / Linux)	Shortcut (macOS)	Action
Ctrl-'	Cmd-'	"toggleBlockquote"
Ctrl-B	Cmd-B	"toggleBold"
Ctrl-E	Cmd-E	"cleanBlock"
Ctrl-H	Cmd-H	"toggleHeadingSmaller"
Ctrl-I	Cmd-I	"toggleItalic"
Ctrl-K	Cmd-K	"drawLink"
Ctrl-L	Cmd-L	"toggleUnorderedList"
Ctrl-P	Cmd-P	"togglePreview"
Ctrl-Alt-C	Cmd-Alt-C	"toggleCodeBlock"
Ctrl-Alt-I	Cmd-Alt-I	"drawImage"
Ctrl-Alt-L	Cmd-Alt-L	"toggleOrderedList"
Shift-Ctrl-H	Shift-Cmd-H	"toggleHeadingBigger"
F9	F9	"toggleSideBySide"
F11	F11	"toggleFullScreen"

Here is how you can change a few, while leaving others untouched:

const editor = new EasyMDE({
    shortcuts: {
        "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
        "toggleCodeBlock": null, // unbind Ctrl-Alt-C
        "drawTable": "Cmd-Alt-T", // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
    }
});

Shortcuts are automatically converted between platforms. If you define a shortcut as "Cmd-B", on PC that shortcut will be changed to "Ctrl-B". Conversely, a shortcut defined as "Ctrl-B" will become "Cmd-B" for Mac users.

The list of actions that can be bound is the same as the list of built-in actions available for toolbar buttons.

Advanced use

Event handling

You can catch the following list of events: https://codemirror.net/doc/manual.html#events

const easyMDE = new EasyMDE();
easyMDE.codemirror.on("change", () => {
    console.log(easyMDE.value());
});

Removing EasyMDE from text area

You can revert to the initial text area by calling the toTextArea method. Note that this clears up the autosave (if enabled) associated with it. The text area will retain any text from the destroyed EasyMDE instance.

const easyMDE = new EasyMDE();
// ...
easyMDE.toTextArea();
easyMDE = null;

If you need to remove registered event listeners (when the editor is not needed anymore), call easyMDE.cleanup().

Useful methods

The following self-explanatory methods may be of use while developing with EasyMDE.

const easyMDE = new EasyMDE();
easyMDE.isPreviewActive(); // returns boolean
easyMDE.isSideBySideActive(); // returns boolean
easyMDE.isFullscreenActive(); // returns boolean
easyMDE.clearAutosavedValue(); // no returned value

How it works

EasyMDE is a continuation of SimpleMDE.

SimpleMDE began as an improvement of lepture's Editor project, but has now taken on an identity of its own. It is bundled with CodeMirror and depends on Font Awesome.

CodeMirror is the backbone of the project and parses much of the Markdown syntax as it's being written. This allows us to add styles to the Markdown that's being written. Additionally, a toolbar and status bar have been added to the top and bottom, respectively. Previews are rendered by Marked using GitHub Flavored Markdown (GFM).

SimpleMDE fork

I originally made this fork to implement FontAwesome 5 compatibility into SimpleMDE. When that was done I submitted a pull request, which has not been accepted yet. This, and the project being inactive since May 2017, triggered me to make more changes and try to put new life into the project.

Changes include:

• FontAwesome 5 compatibility
• Guide button works when editor is in preview mode
• Links are now https:// by default
• Small styling changes
• Support for Node 8 and beyond
• Lots of refactored code
• Links in preview will open in a new tab by default
• TypeScript support

My intention is to continue development on this project, improving it and keeping it alive.

Hacking EasyMDE

You may want to edit this library to adapt its behavior to your needs. This can be done in some quick steps:

1. Follow the prerequisites and installation instructions in the contribution guide;
2. Do your changes;
3. Run gulp command, which will generate files: dist/easymde.min.css and dist/easymde.min.js;
4. Copy-paste those files to your code base, and you are done.

Contributing

Want to contribute to EasyMDE? Thank you! We have a contribution guide just for you!

---

Author: Ionaru
Source Code: https://github.com/Ionaru/easy-markdown-editor
License: MIT license

#react-native #react 

How to Add Splash Screen in Android and iOS with Flutter

When your app is opened, there is a brief time while the native app loads Flutter. By default, during this time, the native app displays a white splash screen. This package automatically generates iOS, Android, and Web-native code for customizing this native splash screen background color and splash image. Supports dark mode, full screen, and platform-specific options.

What's New

[BETA] Support for flavors is in beta. Currently only Android and iOS are supported. See instructions below.

You can now keep the splash screen up while your app initializes! No need for a secondary splash screen anymore. Just use the preserve and remove methods together to remove the splash screen after your initialization is complete. See details below.

Usage

Would you prefer a video tutorial instead? Check out Johannes Milke's tutorial.

First, add flutter_native_splash as a dependency in your pubspec.yaml file.

dependencies:
  flutter_native_splash: ^2.2.19

Don't forget to flutter pub get.

1. Setting the splash screen

 

Customize the following settings and add to your project's pubspec.yaml file or place in a new file in your root project folder named flutter_native_splash.yaml.

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  #image: assets/splash.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # Android 12 handles the splash screen differently than previous versions.  Please visit
  # https://developer.android.com/guide/topics/ui/splash-screen
  # Following are Android 12 specific parameter.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  #android: false
  #ios: false
  #web: false

  # Platform specific images can be specified with the following parameters, which will override
  # the respective parameter.  You may specify all, selected, or none of these parameters:
  #color_android: "#42a5f5"
  #color_dark_android: "#042a49"
  #color_ios: "#42a5f5"
  #color_dark_ios: "#042a49"
  #color_web: "#42a5f5"
  #color_dark_web: "#042a49"
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.png
  #image_dark_web: assets/splash-invert-web.png
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_dark_ios: assets/dart_dark-ios.png

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # The screen orientation can be set in Android with the android_screen_orientation parameter.
  # Valid parameters can be found here:
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true

  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

2. Run the package

After adding your settings, run the following command in the terminal:

flutter pub run flutter_native_splash:create

When the package finishes running, your splash screen is ready.

To specify the YAML file location just add --path with the command in the terminal:

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml

3. Set up app initialization (optional)

By default, the splash screen will be removed when Flutter has drawn the first frame. If you would like the splash screen to remain while your app initializes, you can use the preserve() and remove() methods together. Pass the preserve() method the value returned from WidgetsFlutterBinding.ensureInitialized() to keep the splash on screen. Later, when your app has initialized, make a call to remove() to remove the splash screen.

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// whenever your initialization is completed, remove the splash screen:
    FlutterNativeSplash.remove();

NOTE: If you do not need to use the preserve() and remove() methods, you can place the flutter_native_splash dependency in the dev_dependencies section of pubspec.yaml.

4. Support the package (optional)

If you find this package useful, you can support it for free by giving it a thumbs up at the top of this page. Here's another option to support the package:

Android 12+ Support

Android 12 has a new method of adding splash screens, which consists of a window background, icon, and the icon background. Note that a background image is not supported.

Be aware of the following considerations regarding these elements:

1: image parameter. By default, the launcher icon is used:

• App icon without an icon background, as shown on the left: This should be 1152×1152 pixels, and fit within a circle 768 pixels in diameter.
• App icon with an icon background, as shown on the right: This should be 960×960 pixels, and fit within a circle 640 pixels in diameter.

2: icon_background_color is optional, and is useful if you need more contrast between the icon and the window background.

3: One-third of the foreground is masked.

4: color the window background consists of a single opaque color.

PLEASE NOTE: The splash screen may not appear when you launch the app from Android Studio on API 31. However, it should appear when you launch by clicking on the launch icon in Android. This seems to be resolved in API 32+.

PLEASE NOTE: There are a number of reports that non-Google launchers do not display the launch image correctly. If the launch image does not display correctly, please try the Google launcher to confirm that this package is working.

PLEASE NOTE: The splash screen does not appear when you launch the app from a notification. Apparently this is the intended behavior on Android 12: core-splashscreen Icon not shown when cold launched from notification.

Flavor Support

If you have a project setup that contains multiple flavors or environments, and you created more than one flavor this would be a feature for you.

Instead of maintaining multiple files and copy/pasting images, you can now, using this tool, create different splash screens for different environments.

Pre-requirements

In order to use the new feature, and generate the desired splash images for you app, a couple of changes are required.

If you want to generate just one flavor and one file you would use either options as described in Step 1. But in order to setup the flavors, you will then be required to move all your setup values to the flutter_native_splash.yaml file, but with a prefix.

Let's assume for the rest of the setup that you have 3 different flavors, Production, Acceptance, Development.

First this you will need to do is to create a different setup file for all 3 flavors with a suffix like so:

flutter_native_splash-production.yaml
flutter_native_splash-acceptance.yaml
flutter_native_splash-development.yaml

You would setup those 3 files the same way as you would the one, but with different assets depending on which environment you would be generating. For example (Note: these are just examples, you can use whatever setup you need for your project that is already supported by the package):

# flutter_native_splash-development.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-development.png
  branding: assets/branding-development.png
  color_dark: "#121212"
  image_dark: assets/logo-development.png
  branding_dark: assets/branding-development.png

  android_12:
    image: assets/logo-development.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-development.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-acceptance.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-acceptance.png
  branding: assets/branding-acceptance.png
  color_dark: "#121212"
  image_dark: assets/logo-acceptance.png
  branding_dark: assets/branding-acceptance.png

  android_12:
    image: assets/logo-acceptance.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-acceptance.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-production.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-production.png
  branding: assets/branding-production.png
  color_dark: "#121212"
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"

  web: false

Great, now comes the fun part running the new command!

The new command is:

# If you have a flavor called production you would do this:
flutter pub run flutter_native_splash:create --flavor production

# For a flavor with a name staging you would provide it's name like so:
flutter pub run flutter_native_splash:create --flavor staging

# And if you have a local version for devs you could do that:
flutter pub run flutter_native_splash:create --flavor development

Android setup

You're done! No, really, Android doesn't need any additional setup.

Note: If it didn't work, please make sure that your flavors are named the same as your config files, otherwise the setup will not work.

iOS setup

iOS is a bit tricky, so hang tight, it might look scary but most of the steps are just a single click, explained as much as possible to lower the possibility of mistakes.

When you run the new command, you will need to open xCode and follow the steps bellow:

Assumption

• In order for this setup to work, you would already have 3 different schemes setup; production, acceptance and development.

Preparation

• Open the iOS Flutter project in Xcode (open the Runner.xcworkspace)
• Find the newly created Storyboard files at the same location where the original is {project root}/ios/Runner/Base.lproj
• Select all of them and drag and drop into Xcode, directly to the left hand side where the current LaunchScreen.storyboard is located already
• After you drop your files there Xcode will ask you to link them, make sure you select 'Copy if needed'
• This part is done, you have linked the newly created storyboards in your project.

xCode

Xcode still doesn't know how to use them, so we need to specify for all the current flavors (schemes) which file to use and to use that value inside the Info.plist file.

• Open the iOS Flutter project in Xcode (open the Runner.xcworkspace)
• Click the Runner project in the top left corner (usually the first item in the list)
• In the middle part of the screen, on the left side, select the Runner target
• On the top part of the screen select Build Settings
• Make sure that 'All' and 'Combined' are selected
• Next to 'Combine' you have a '+' button, press it and select 'Add User-Defined Setting'
• Once you do that Xcode will create a new variable for you to name. Suggestion is to name it LAUNCH_SCREEN_STORYBOARD
• Once you do that, you will have the option to define a specific name for each flavor (scheme) that you have defined in the project. Make sure that you input the exact name of the LaunchScreen.storyboard that was created by this tool
  • Example: If you have a flavor Development, there is a Storyboard created name LaunchScreenDevelopment.storyboard, please add that name (without the storyboard part) to the variable value next to the flavor value
• After you finish with that, you need to update Info.plist file to link the newly created variable so that it's used correctly
• Open the Info.plist file
• Find the entry called 'Launch screen interface file base name'
• The default value is 'LaunchScreen', change that to the variable name that you create previously. If you follow these steps exactly, it would be LAUNCH_SCREEN_STORYBOARD, so input this $(LAUNCH_SCREEN_STORYBOARD)
• And your done!

Congrats you finished your setup for multiple flavors,

FAQs

I got the error "A splash screen was provided to Flutter, but this is deprecated."

This message is not related to this package but is related to a change in how Flutter handles splash screens in Flutter 2.5. It is caused by having the following code in your android/app/src/main/AndroidManifest.xml, which was included by default in previous versions of Flutter:

<meta-data
 android:name="io.flutter.embedding.android.SplashScreenDrawable"
 android:resource="@drawable/launch_background"
 />

The solution is to remove the above code. Note that this will also remove the fade effect between the native splash screen and your app.

Are animations/lottie/GIF images supported?

Not at this time. PRs are always welcome!

I got the error AAPT: error: style attribute 'android:attr/windowSplashScreenBackground' not found

This attribute is only found in Android 12, so if you are getting this error, it means your project is not fully set up for Android 12. Did you update your app's build configuration?

I see a flash of the wrong splash screen on iOS

This is caused by an iOS splash caching bug, which can be solved by uninstalling your app, powering off your device, power back on, and then try reinstalling.

I see a white screen between splash screen and app

1. It may be caused by an iOS splash caching bug, which can be solved by uninstalling your app, powering off your device, power back on, and then try reinstalling.
2. It may be caused by the delay due to initialization in your app. To solve this, put any initialization code in the removeAfter method.

Can I base light/dark mode on app settings?

No. This package creates a splash screen that is displayed before Flutter is loaded. Because of this, when the splash screen loads, internal app settings are not available to the splash screen. Unfortunately, this means that it is impossible to control light/dark settings of the splash from app settings.

Notes

If the splash screen was not updated correctly on iOS or if you experience a white screen before the splash screen, run flutter clean and recompile your app. If that does not solve the problem, delete your app, power down the device, power up the device, install and launch the app as per this StackOverflow thread.

This package modifies launch_background.xml and styles.xml files on Android, LaunchScreen.storyboard and Info.plist on iOS, and index.html on Web. If you have modified these files manually, this plugin may not work properly. Please open an issue if you find any bugs.

How it works

Android

• Your splash image will be resized to mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi drawables.
• An <item> tag containing a <bitmap> for your splash image drawable will be added in launch_background.xml
• Background color will be added in colors.xml and referenced in launch_background.xml.
• Code for full screen mode toggle will be added in styles.xml.
• Dark mode variants are placed in drawable-night, values-night, etc. resource folders.

iOS

• Your splash image will be resized to @3x and @2x images.
• Color and image properties will be inserted in LaunchScreen.storyboard.
• The background color is implemented by using a single-pixel png file and stretching it to fit the screen.
• Code for hidden status bar toggle will be added in Info.plist.

Web

• A web/splash folder will be created for splash screen images and CSS files.
• Your splash image will be resized to 1x, 2x, 3x, and 4x sizes and placed in web/splash/img.
• The splash style sheet will be added to the app's web/index.html, as well as the HTML for the splash pictures.

Acknowledgments

This package was originally created by Henrique Arthur and it is currently maintained by Jon Hanson.

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket. Pull request are also welcome.

---

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_native_splash

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_native_splash: ^2.2.19

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_native_splash/flutter_native_splash.dart';

---

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    initialization();
  }

  void initialization() async {
    // This is where you can initialize the resources needed by your app while
    // the splash screen is displayed.  Remove the following example because
    // delaying the user experience is a bad design practice!
    // ignore_for_file: avoid_print
    print('ready in 3...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 2...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 1...');
    await Future.delayed(const Duration(seconds: 1));
    print('go!');
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Download Details:
 

Author: jonbhanson
Download Link: Download The Source Code
Official Website: https://github.com/jonbhanson/flutter_native_splash 
License: MIT license

#flutter #ios #android